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.

Answer 1

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