Question

我需要以正确的方式验证即时消息，这是我的数据编辑和保存组件的代码，请查看并给我一个反馈：）

在我看来

<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

不，你应该使用ngModel或FormControl如果你想在ngModel内使用Reactive Form，那么如果你同时使用它们将会出现错误1}}您应该将[ngModelOptions]="{standalone: true}"添加到标记属性中。检查this和this以获取更多信息。

Answer 2

由于你有一个反应形式，使用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>

希望这有帮助！：）

编辑表单数据加载并传递 - ngModel和formControl

2 个答案: