Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Reactive form fields are not updated with setValue or patchValue

Following is my piece of code, I have simplified the code for purpose of brevity.

ngOnInit() {
    //intialize form fields 
    this.form = this.builder.group({
      name: '',
      age: '',
      location: '',
    });

    //Call to the service

    this.dataService.getDetails().subscribe(
      (data) => {
        this.dataArray = data;
        if (this.dataArray[this.count].status === 'OK') {
          let docs = {};
          this.someService.getDocs(this.dataArray[this.count].id).subscribe(
            (data) => {
              docs = data;
              console.log("docs: ", docs);
              this.setFormValues(docs);//set form values
            },
            (err) => {
              console.log(err);
              console.log('Something happened');
            }
          );
        }
      },
      (err) => {
        console.log(err);
        console.log('Something happened',err);
      }
    );
  }

Now in setFormValues() I have printed the values of the fields and its working fine up to that point but next when I try to bind the values to the form , with either setValue or patchValue, it simply does not update the form with the fetched values from service.

Some more code in this regard

public setFormValues(doc: DocsDTO) {
    if (doc!= null) {
      console.log("setFormValues", doc);
      this.form.patchValue({
        name: doc.name == null ? '' : doc.name.text,
        age: doc.age == null ? '' : doc.age.text,
        location: doc.location == null ? '' : doc.location.text,
      })
    }
  }

Here is how my form looks like

<form [formGroup]="form">
          <mat-card-content>
            <input placeholder="name" [formControl]="name" id="name"
              ngDefaultControl></input>
            <input placeholder="age" [formControl]="age" id="age" ngDefaultControl></input>
          </mat-card-content>
        </mat-card>
</form>

Note: When I do not use FormBuilder and intialize form fields with FormControl and set form values with this.name.setValue() then it works fine.

I am pretty new to angular , I am not sure what am I doing wrong here.

like image 259
Sajjad Avatar asked Nov 02 '18 14:11

Sajjad


People also ask

What is difference between patchValue and setValue?

SetValue Vs PatchValue The difference is that with setValue we must include all the controls, while with the patchValue you can exclude some controls.

Does patchValue set dirty?

New!

How do you use setValue?

You can use the SetValue macro action to set the value of an Access field, control, or property on a form, a form datasheet, or a report. Note: You cannot use the SetValue macro action to set the value of an Access property that returns an object.


1 Answers

This looks fine to me except the place where you are setting up the pathvalue:

The doc.name.text doesn't look right to me. You should try

this.form.patchValue({
    name: !!doc.name ? doc.name : '',
    age: !!doc.age ? doc.age: '',
    location: !!doc.location ? doc.location : '',
  })

This will update our FormControl instances, simple! Also I think we do not need the conditional setting here as:

set pathvalue throws no errors due to the if check inside the Object.keys loop. Some might say it’s a safe $apply, just kidding. It’ll allow you to set values that exist and it will ignore ones that do not exist in the current iterated control

On the other hand setValue is a “more safe” way to do things. It’ll error for props that do not exist.

If you add the formControlName properly, it would work:

 <input placeholder="name" formControlName="name" id="name" ngDefaultControl>
 <input placeholder="age" formControlName="age" id="age" ngDefaultControl>

Take a look at the stackBlitz that I did for you here:

like image 158
nircraft Avatar answered Sep 28 '22 18:09

nircraft