编辑表单数据的负载和传递 - 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了解更多信息。