必须以 Angular 的形式提供名称的值

Question

我在 Anuglar 8 中有一个表格，表格中有一个下拉列表，用户可以在其中选择一个选项。但是当第一次加载表单时，它说表单控件的值必须提供一个值

所以这是下拉列表：

  <mat-form-field>
        <mat-select name="notificationType"  [(ngModel)]="someVariable" #notificationType="ngModel" placeholder="Notification type"
          placeholder-i18n required>
          <mat-option value="" disabled></mat-option>
          <mat-option [value]="notificationTypes.Never" i18n>Never</mat-option>
          <mat-option [value]="notificationTypes.OnCreation" i18n>OnCreation</mat-option>
          <mat-option [value]="notificationTypes.Scheduled" i18n>Scheduled</mat-option>
        </mat-select>
        <mat-error>
          <app-element-edit-field-error [errors]="notificationType.errors"></app-element-edit-field-error>
        </mat-error>
      </mat-form-field>

这是 ngOniit 函数：

ngOnInit() {

    // Needed to avoid the "there are no controls associated with this form" error.

    setTimeout(() => {
      if (!this.editable) {
        for (const key of _.keys(this.definitionHeaderForm.controls)) {
          this.definitionHeaderForm.controls[key].disable();
        }
      }   

      if (this.notificationTypes === undefined) {
        this.notificationTypes = null;
      } else {
        EcheqUtils.setFormValue(this.definitionHeaderForm, this.definition);
        EcheqUtils.applyErrors(this.definitionHeaderForm, this.errorTree);
      }



      this.definitionHeaderForm.valueChanges.subscribe(value => {
        for (const field of _.keys(this.definitionHeaderForm.controls)) {
          this.definition[field] = value[field];

          //const hallo2 = this.definitionHeaderForm.controls['notificationType'].setValue(this.notificationTypes.Never);
          //console.log(hallo2);
        }
      });
      this.definitionHeaderForm.statusChanges.subscribe(status => {
        this.canClose = status === "VALID" || status === "DISABLED";
      });
    }, 1000);
  }

以此类推：

 EcheqUtils.setFormValue(this.definitionHeaderForm, this.definition);

我收到此错误：

core.js:12584 ERROR Error: Must supply a value for form control with name: 'notificationType'.
    at forms.js:3370
    at forms.js:3309
    at Array.forEach (<anonymous>)
    at FormGroup.push../node_modules/@angular/forms/fesm5/forms.js.FormGroup._forEachChild (forms.js:3309)
    at FormGroup.push../node_modules/@angular/forms/fesm5/forms.js.FormGroup._checkAllValuesPresent (forms.js:3368)
    at FormGroup.push../node_modules/@angular/forms/fesm5/forms.js.FormGroup.setValue (forms.js:3158)
    at NgForm.push../node_modules/@angular/forms/fesm5/forms.js.NgForm.setValue (forms.js:3900)
    at Function.push../src/app/echeq-definition/echeq-utils.ts.EcheqUtils.setFormValue (echeq-utils.ts:97)
    at definition-form-dialog.component.ts:73
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)

而这个函数：setFormValue 看起来像这样：

static setFormValue(form: NgForm, object: {}) {

    const copy = {};
    console.log(copy);
    for (const key of _.keys(form.controls)) {
      copy[key] = object[key];
    }
    form.setValue(copy);
  }

谢谢

这样就不会再显示错误了

console.log(copy) 的结果如下所示：

actions: []
awardedVPoints: 0
calculatedVariables: []
initialVariables: []
notificationType: undefined
title: "Nieuwe echeq"
validDays: null
__proto__: Object

这是 ts 文件中的属性：

someVariable: any; 


@ViewChild(NgForm) definitionHeaderForm: NgForm;

Answer 1

如果您不想为所有表单控件提供值，可以使用patchValue 方法

static setFormValue(form: NgForm, object: {}) {

    const copy = {};
    console.log(copy);
    for (const key of _.keys(form.controls)) {
      copy[key] = object[key];
    }
    form.patchValue(copy); // ?
  }