Angular2 Reactive forms - Set default value for form fields with dropdown
<p>How can I set the default value for all forms fields in angular 2 reactive forms? </p>

<p>Here is the <a href="https://plnkr.co/edit/GKguMzZbr0kzrraPP73f?p=preview" rel="noreferrer">plnkr</a> to reproduce the issue </p>

<p>Below code does not update dropdown values as it has an object associated with it.</p>

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

<p>Component.html</p>

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

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

<p></p>

<p>Component.ts</p>

<pre><code>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: ['', [&lt;any&gt;Validators.required, &lt;any&gt;Validators.minLength(5)]],
        });


        (&lt;FormGroup&gt;this.myForm)
            .setValue(this.CountryResponse, {onlySelf: true});


    }


    save(model: User, isValid: boolean) {
        this.submitted = true;
        console.log(model, isValid);
    }
}
</code></pre>

<p>Let me know if there is any other way to set the whole form.</p>