Angular2 Reactive forms - Set default value for form fields with dropdown

Question

How can I set the default value for all forms fields in angular 2 reactive forms?

Here is the plnkr to reproduce the issue

Below code does not update dropdown values as it has an object associated with it.

Note: Here I need to set the default value for all form fields with the response received from Backend API.

Component.html

<form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm.value, myForm.valid)">
    <div class="form-group">
        <label>Country:</label>
        <select formControlName="country">
          <option *ngFor="let country of masterCountries" [ngValue]="country">{{country.countryName}}</option>
        </select>
    </div>

    <div class="form-group">
      <label for="">Name</label>
      <input type="text" class="form-control" formControlName="name">
      <small [hidden]="myForm.controls.name.valid || (myForm.controls.name.pristine && !submitted)" class="text-danger">
            Name is required (minimum 5 characters).
          </small>
      <!--<pre class="margin-20">{{ myForm.controls.name.errors | json }}</pre>-->
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
    <div class="margin-20">
      <div>myForm details:-</div>
      <pre>Is myForm valid?: <br>{{myForm.valid | json}}</pre>
      <pre>Is myForm submitted?: <br>{{submitted | json}}</pre>
      <pre>myForm value: <br>{{myForm.value | json}}</pre>
    </div>

Component.ts

export class AppComponent implements OnInit {
    public myForm: FormGroup;
    public masterCountries: any[] = [{"countryCode":"AF","countryName":"Afghanistan"},{"countryCode":"AL","countryName":"Albania"},{"countryCode":"DZ","countryName":"Algeria"},{"countryCode":"AS","countryName":"American Samoa"},{"countryCode":"AD","countryName":"Andorra"}];

    // Sample response received from backend api
    public CountryResponse = {country: {"countryCode":"AF","countryName":"Afghanistan"}, name: 'test123'};
    constructor(private _fb: FormBuilder) { }

    ngOnInit() {

        // the short way
        this.myForm = this._fb.group({
            country: [''],
            name: ['', [<any>Validators.required, <any>Validators.minLength(5)]],
        });


        (<FormGroup>this.myForm)
            .setValue(this.CountryResponse, {onlySelf: true});


    }


    save(model: User, isValid: boolean) {
        this.submitted = true;
        console.log(model, isValid);
    }
}

Let me know if there is any other way to set the whole form.

Possible duplicate of angular 2 - bind object to dropdown and select value based on an event — Fabio Antunes
– Fabio Antunes, Commented Sep 29, 2016 at 10:11
And also a duplicate of stackoverflow.com/questions/39745629/… — Fabio Antunes
– Fabio Antunes, Commented Sep 29, 2016 at 10:13
It is not a duplicate. I need to update all form fields with the sample response received from backend. updated my question to reflect the same — Narendra CM
– Narendra CM, Commented Sep 29, 2016 at 10:24

daremachine · Accepted Answer · 2018-05-16 12:42:34Z

50

I know this is an old question, but if anyone looks for it, there is now a better way to set value in the whole form, with PatchValue:

this.myForm.patchValue({
   country: this.CountryResponse,
   name: 'Any Name'
});

this also allows partial, so you would still be able to do something like:

this.myForm.patchValue({ country: this.CountryResponse });

or you can set the value into a single control:

this.myForm.get('country').setValue(this.CountryResponse);

edited May 16, 2018 at 12:42

daremachine

2,7982 gold badges27 silver badges36 bronze badges

answered Mar 13, 2018 at 12:31

DeBorges

7401 gold badge7 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Omkar Dixit · Accepted Answer · 2018-01-02 07:49:42Z

17

When you declare the form control or initialise pass the default value as a parameter

  MyFormControl: FormControl = new FormControl('Default value');

answered Jan 2, 2018 at 7:49

Omkar Dixit

7741 gold badge9 silver badges20 bronze badges

3 Comments

Luca Over a year ago

cleanest way to do this

Gopi P Over a year ago

I think this is a cleaner way to achieve. It worked for me thanks

Optimist Rohit Over a year ago

What if I dont want to show default value in HTML view?

Anaa · Accepted Answer · 2017-07-17 12:49:21Z

13

Just change this:

 (<FormGroup>this.myForm)
            .setValue(this.CountryResponse, {onlySelf: true});

Into this:

const selectedCountry = this.masterCountries.find(country => country.countryCode === this.CountryResponse.country.countryCode)
this.CountryResponse.country = selectedCountry;
(<FormGroup>this.myForm)
            .setValue(this.CountryResponse, {onlySelf: true});

As said before you need to pass the exact same reference of the object

edited Jul 17, 2017 at 12:49

Anaa

1,1911 gold badge9 silver badges21 bronze badges

answered Sep 29, 2016 at 10:34

Fabio Antunes

22.9k17 gold badges83 silver badges96 bronze badges

1 Comment

Monish Sen Over a year ago

patchValue is more appropriate

Harry Ninh · Accepted Answer · 2016-09-29 09:56:10Z

10

Your code does not work because although your this.selectedCountry appears to have the same fields' values with one of the elements of this.masterCountries, they are not the same object. That makes select.value === option.value comparison always returns false.

It's simple to make it works, just change your setValue function to as follow:

(<FormControl>this.form.controls['country'])
            .setValue(this.masterCountries[0], { onlySelf: true });

Or you can just set it when creating the FormGroup:

    this.myForm = this._fb.group({
        country: [this.masterCountries[0]],
        name: ['', [<any>Validators.required, <any>Validators.minLength(5)]],
    });

answered Sep 29, 2016 at 9:56

Harry Ninh

16.8k5 gold badges64 silver badges56 bronze badges

1 Comment

Narendra CM Over a year ago

Thanks for the answer. Yes it works if i use the masterCountries to set the value. But I need to set the whole form with the response received from backend. Updated my plnkr with thsi scenario. plnkr.co/edit/GKguMzZbr0kzrraPP73f?p=preview

Collectives™ on Stack Overflow

Angular2 Reactive forms - Set default value for form fields with dropdown

4 Answers 4

Comments

3 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related