CODEWITHSUNDEEP
angularnullangular-materialangular-reactive-forms
tom33pr
tom33pr

Reputation: 1023

Angular 6 getRawValue() will not return disabled values

I have an example form as follows:

 stuff: IStuff; 
 buildForm() {
        this.createForm = this.form.group({
            Val1: [{ value: '', disabled: true }],
            Val2: [{ value: '', disabled: true }]
        });

As you can see both values are set to disabled.

The constructor triggers a httpClient get and populates the model:

this.exampleHttpService.getStuff()
    .subscribe(stuff => this.stuff = stuff);

Where stuff is:

export interface IStuff {
    Val1?: number; 
    Val2?: number
}

The binding is the done in the html for both Val1 and Val2 as follows:

  <input name="Val1" matInput formControlName="Val1" [value]="stuff?.Val1">

This is all god and it nicely assigns the values and displays them on the screen; however when I am trying to get those values back using 

this.createForm.getRawValue()

I get '' empty strings for both values...

Any idea?

Upvotes: 5

Views: 19635

Answers (4)

melenchenkov
melenchenkov

Reputation: 225

The Problem in the above code is you are Initializing the Form but you are not binding the Values to the Form. Instead from the above approach you are binding the values to the Template using property binding but not binding the values to the form itself.

If you are using Reactive forms , always binding your data and update your data using the forms itself.

this.exampleHttpService.getStuff()
    .subscribe((stuff) => {
        this.createForm.get('Val1').setValue(stuff.Val1);
        this.createForm.get('Val2').setValue(stuff.Val2);
    });

Or

this.exampleHttpService.getStuff()
        .subscribe((stuff) => {
            this.createForm.get('Val1').patchValue({
               Val1: stuff.Val1
               val2: stuff.Val2
             });
           
        });

Difference between getRawValue() and value for a form is getRawValue() gets all fields data and value gets only enabled fields(disabled will be removed from the Object )

Upvotes: 0

viking
viking

Reputation: 425

The correct way to initialize a reactive form would be:

stuff: IStuff; 
 buildForm() {
        //Get value for stuff before initializing form
        this.createForm = this.form.group({
            Val1: [{ stuff.Val1: '', disabled: true }],
            Val2: [{ stuff.Val2: '', disabled: true }]
        });

Another noteworthy point here is that to get the value of form, this.createForm.value will not provide updated values for disabled controls. this.createForm.getRawValue() is the option in such a case.

Upvotes: 0

G. Tranter
G. Tranter

Reputation: 17938

When you use reactive forms, the input value is already bound to the form control, you don't need to (and shouldn't) bind to the input's value as the value and the form control are not the same thing. In your code, you are initializing 'stuff' that is bound to the input values, but you aren't initializing the form control values. You need to initialize the form control values:

this.exampleHttpService.getStuff()
    .subscribe((stuff) => {
        this.createForm.controls['Val1'] = stuff.Val1;
        this.createForm.controls['Val2'] = stuff.Val2;
    });

Upvotes: 3

Kellie Hall
Kellie Hall

Reputation: 94

Do you setValue on the FormControls once you get back data from the service? From the code I see, you are initializing the FormControls as empty string so that leads me to guess you maybe aren't setting the values?

Upvotes: 1

Related Questions