編輯表單數據的負載和傳遞 - ngModel和formControl

Question

我需要驗證以正確的方式IM，這裏是我的數據編輯代碼並保存組件，請審查並給我在我看來反饋:)

<div [formGroup]="policyForm"> 
    <div formGroupName="PolicyDetail" class="col-md-4"> 
       <label for="exampleInputEmail1"> 
        Post Code 
       </label> 
       <input type="text" class="form-control" [ngModel]="policyDetail.postcode" formControlName="PostCode" placeholder="Post Code" /> 
      </div> 
</div> 

我的TS文件

this.policyService.getPolicyDetails().subscribe(
      (data) => { 

       this.policyDetail = data.policyDetail; 
}, 
      (error) => { 
       console.log('Failure Policy Details'); 

      }); 


this.policyForm = new FormGroup({ 

PolicyDetail: new FormGroup({ 
       PostCode: new FormControl(), 
}), 
    }); 

我在輸入控制器使用[ngModel]可見數據，並使用FormGroup收集數據和驗證等..

是否使用ngModel和formControl都是正確的？或者有沒有辦法將數據設置到沒有ngModel的控制器？

Answer 1

由於您有反應形式，利用formcontrols，您可以設置它們的值。由於你有來自api的傳入數據，因此我建議你使用patchValue，它在數據已被檢索後設置值以不會拋出錯誤，因爲這是異步操作。所以將默認值設置爲空。

constructor(private fb: FormBuilder, .....) { } 

ngOnInit() { 
    this.getPolicyDetails(); 

    this.policyForm = this.fb.group({ 
    PostCode: ['', Validators.required], 
    }); 
} 

getPolicyDetails() { 
    this.policyService.getPolicyDetails().subscribe(data => { 
    this.policyDetail = data.policyDetail; 
    // Now we have the values, let's use patchValue! 
    this.setValues(); 
    }); 
} 

setValues() { 
    this.policyForm 
    .patchValue({ 
     PostCode: this.policyDetail.postcode 
    }) 
} 

所以現在你可以從你的表單跳過ngModel乾脆：

<div [formGroup]="policyForm"> 
    <input type="text" formControlName="PostCode" /> 
</div> 

希望這有助於！ :)

Answer 2

不，你應該使用ngModel或FormControl它總是浮現一個錯誤，如果你使用他們兩個，如果你想使用一個ngModel裏面Reactive Form你應該增加[ngModelOptions]="{standalone: true}"到標籤屬性。請查詢this和this瞭解更多信息。