CODEWITHSUNDEEP
javascriptangularformsangular-materialundefined
mightycode Newton
mightycode Newton

Reputation: 3949

Must supply a value for name in form in Angular

I have a form in Anuglar 8 and in the form there is a dropdownlist where a user can choose an option. But when the form is loaded first time it says that the value of form control must suply a value

So this is the dropdownlist:


  <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>

and this is the ngOniit function:

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

And so on this line:

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

I get this error:

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)

And this function: setFormValue looks like this:

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

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

Thank you

So that the error not will been shown anymore

and so the outcome of the console.log(copy) looks like this:

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

and this is the property in the ts file:

someVariable: any; 


@ViewChild(NgForm) definitionHeaderForm: NgForm;

Upvotes: 1

Views: 261

Answers (1)

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24424

if you don't want to provide a value for all form controls you can use patchValue method 

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

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

Upvotes: 1

Related Questions