CODEWITHSUNDEEP
angularangular-reactive-forms
Alaksandar Jesus Gene
Alaksandar Jesus Gene

Reputation: 6887

angular2 Form Value on Set and Disable not binding data

Here is my oode to update the Form if user is available.

if (this.user.landmark) this.uploadForm.controls['landmark'].setValue(this.user.landmark || '');
    //if (this.user.landmark) this.uploadForm.get('landmark').disable({ onlySelf: true });

If i uncomment disable, and click on submit, the landmark field is not generated in the output json.

For Example

Without Disable

console.log(this.uploadForm.value) gives

{
username:"dummyUser",
landmark:"Nearby EB Office"
}

With Disable

console.log(this.uploadForm.value) gives

{
username:"dummyUser"
}

Upvotes: 0

Views: 544

Answers (1)

yurzui
yurzui

Reputation: 214125

FormGroup.value doesn't include controls that are disabled

 it('should ignore disabled controls when serializing value in a group', () => {
    const c = new FormControl('one');
    const c2 = new FormControl('two');
    const g = new FormGroup({one: c, two: c2});
    expect(g.value).toEqual({one: 'one', two: 'two'});

    c.disable();
    expect(g.value).toEqual({two: 'two'});

    c.enable();
    expect(g.value).toEqual({one: 'one', two: 'two'});
  });

Use this.uploadForm.getRawValue() instead. See also doc

If you'd like to include all values regardless of disabled status, use this method. Otherwise, the value property is the best way to get the value of the group.

Upvotes: 3

Related Questions