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); // ?
  }

必须以Angular形式提供名称值

1 个答案: