Angular2 Reaktywne formularze - Ustaw domyślną wartość pól formularza z rozwijanym menu

Question

Jak ustawić domyślną wartość dla wszystkich pól formularzy w kątowych 2 formach reaktywnych?

Oto plnkr odtworzyć problem

poniższy kod nie aktualizuje wartości rozwijanych ponieważ ma obiektu z nim związane.

Uwaga: W tym miejscu należy ustawić wartość domyślną dla wszystkich pól formularza z odpowiedzią otrzymaną z interfejsu API zaplecza.

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

Daj mi znać, czy jest jakiś inny sposób, aby ustawić cały formularz.

Answer 1

Wystarczy zmienić:

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

W tym:

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

Jak powiedział przed musisz przejść dokładnie taką samą nazwę obiektu

Answer 2

Twój kod nie działa, ponieważ chociaż Twój this.selectedCountry wydaje się mieć wartości tych samych dziedzinach jednym z elementów this.masterCountries, są nie ten sam obiekt. To sprawia, że ​​porównanie select.value === option.value zawsze zwraca false.

To proste, aby to działa, po prostu zmienić swoją funkcję setValue się następująco:

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

Albo można po prostu ustawić go przy tworzeniu FormGroup:

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

Answer 3

Kiedy deklarujesz kontrolę formularz lub zainicjować przekazać wartość domyślną jako parametr

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