Angular 2 reaktive Formen Ausgabe

Question

Ich habe eine Frage in Bezug auf Angular 2 reaktive Formen. Ich versuche, zwei Dinge in meiner reaktiven Formularansicht zu tun:

1. Haben Sie einen Standardwert in der Dropdown-Liste von Ländername.

2. Ändern Sie das Eingabefeld für den Ländercode anhand der Auswahl des Felds für den Ländernamen. Siehe HTML unten ist.

country.ts

export class Country { 
    countryName: string; 
    countryCode: number 
} 

In-Memory-data.service.ts die

meiner Datenbank ist

import { InMemoryDbService } from 'angular-in-memory-web-api'; 
import { Injectable } from '@angular/core'; 

@Injectable() 
export class InMemoryDataService implements InMemoryDbService {` 

    createDb() { 
    let countries = [ 
     { 
      countryName: 'Saudi Arabia', 
      countryCode: '+966' 
     }, { 
      countryName: 'Bahrain', 
      countryCode: '+973' 
     }, { 
      countryName: 'United Kingdom', 
      countryCode: '+44' 
     },{ 
      countryName: 'United Arab Emirates', 
      countryCode: '+967' 
     },{ 
      countryName: 'Brazil', 
      countryCode: '+55' 
     },{ 
      countryName: 'Czech Republic', 
      countryCode: '+420' 
     } 
    ]; 
    return {countries}; 
    } 
} 

html

<div class="container"> 

<div class="row"> 
    <h1 id="header-1"> {{title}}</h1> 
    <div id="instructions"> 
     <p>line 1 for description</p> 
     <p>line 2 for description</p> 

    </div> 
</div> 

<form class=" form form-inline" [formGroup]="userForm" novalidate> 
    <div class="row from-inline" formArrayName="users"> 
     <div *ngFor="let user of userForm.controls.users.controls; let i=index"> 
      <div class="heading"> 
       <span>{{i + 1}}.{{name}} </span> 
       <span class="glyphicon glyphicon-remove pull-right" *ngIf="userForm.controls.users.controls.length > 1" 
        (click)="removeDependent(i)"></span> 
      </div> 
      <div class="body" [formGroupName]="i"> 
       <div class="row row-form-fields"> 
        <div class="form-group col-xs-12 col-sm-6 col-lg-4"> 
         <label class="sr-only" for="countryName">Country name</label> 
         <select class="form-control" id="countryName" formControlName="countryName" > 
          <option *ngFor="let country of countries" [ngValue]="country" >{{country.countryName}}</option> 
         </select> 
         <input type="text" class="form-control" formControlName="countryCode" id="countryCode"/> 
         <div [hidden]="userForm.controls.users.controls[i].controls.countryName.valid || 
            (userForm.controls.users.controls[i].controls.countryName.pristine && !submitted)" class="error-alert"> 
         country is required 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <legend/> 
    <div class="form-group"> 
     <div class="row user-form-btns"> 
      <div class="col-1-3"> 
       <template ngbModalContainer/> 
       <dependent-modal-component/> 
      </div> 
      <div class="col-1-3"> 
       <button class="btn btn-form" (click)="addDependentForm()">add dependents</button> 
      </div> 
      <div class="col-1-3"> 
       <button type="submit" class="btn btn-form" id="btn-submit-form" (click)="onSubmit(userForm.value, userForm.valid)" 
        [disabled]="!userForm.valid">Submit</button> 
      </div> 

     </div> 
    </div> 
</form> 
<div class="row"> 
    <pre>Is myForm valid?: <br>{{userForm.valid | json}}</pre> 
     <pre>form value: <br>{{userForm.value | json}}</pre> 
</div> 

Answer 1

Wenn Sie für einen Steuer einen Standardwert setzen Sie es tun können, wenn Sie das Formular erstellen:

Formbuilder

constructor(dataService: InMemoryDataService, private fb: FormBuilder) { 
    this.name = 'Angular2'; 
    this.countries = dataService.createDb().countries; 
    this.userForm = new FormGroup({ 
         users: new FormArray([]) 
        }); 

    let fg1 = new FormGroup({ 
     countryName: new FormControl(this.countries[0].countryName), 
     countryCode: new FormControl(this.countries[0].countryCode) 
    }); 

Dann werden wir auf die Veränderungen auf dem country abonnieren Kontrolle der Ländercode zu aktualisieren:

fg1.controls.countryName.valueChanges.subscribe((countryName) => { 
     fg1.controls.countryCode.setValue(this.findCountryCodeByCountryName(countryName)); 
    }); 
} 

Hinzufügen eines neuen Benutzers:

addDependent() { 
    let newGroup = new FormGroup({ 
      countryName: new FormControl(this.countries[0].countryName), 
      countryCode: new FormControl(this.countries[0].countryCode) 
     }); 

    newGroup.controls.countryName.valueChanges.subscribe((countryName) => { 
     newGroup.controls.countryCode.setValue(this.findCountryCodeByCountryName(countryName)); 
    }); 

    this.userForm.controls.users.push(newGroup); 
    } 

Die HTML-Bindungen auf einer Basis pro Gruppe folgen:

<div class="body" [formGroupName]="i"> 
      <div class="row row-form-fields"> 
       <div class="form-group col-xs-12 col-sm-6 col-lg-4"> 
       <label class="sr-only" for="countryName">Country name</label> 
       <select class="form-control" id="countryName" formControlName="countryName"> 
        <option *ngFor="let country of countries" [ngValue]="country.countryName">{{country.countryName}}</option> 
       </select> 
       <input type="text" class="form-control" formControlName="countryCode" id="countryCode"/> 
       <div [hidden]="userForm.controls.users.controls[i].valid || 
           (userForm.controls.users.controls[i].pristine && !submitted)" class="error-alert"> 
        country is required 
        </div> 
       </div> 
       </div> 
      </div> 

Mit der countryName Bindung statt ausgewählt binden den Eintrag Land fügt einige Overhead, wo wir ändert sich der Wert einer Lookup jedes Mal zu tun haben anstatt nur von dem, was wir bereits gespeichert haben, zu piggyback, aber das war es, was Sie wollten.

Hier ist ein Plunker: http://plnkr.co/edit/T7QcTcPKB1g7h0GbKYSu?p=preview