mit Mehrwert COMBOBOX Mit Formcontrol In Angular 2

Question

UPDATE

<select (blur)="stateValidate('State *Required', 'State Name')" class="form-control" id="state_address" formControlName="state_address"> 
         <option *ngFor="let state of states">{{state}}</option> 

Ich habe ein Formular, und ich bin vor Füllung in den Wert auf Basis von Daten, die ich in der Datenbank auf dem Benutzer. Ich bin in der Lage, alle Werte in der Form wie diese,

city_address: new FormControl(this.contractData.city_address, [ 
     Validators.required, 
     Validators.pattern("^[a-zA-Zñáéíóúü' ]{1,30}$") 
     ]), 

hinzufügen, aber wenn ich versuche, den Staat der Combobox hinzufügen, es nicht den Wert liefern.

// this does not work. 
    state_address: new FormControl(this.contractData.state_address, [ 
    Validators.required 
    ]), 

Warum dieses Verhalten passieren und was ist der richtige Weg, um einen Wert zu einer Combobox auf der Grundlage der Benutzer Daten in der Datenbank gespeichert hinzufügen?

HTML

<form [formGroup]="contractForm" novalidate (ngSubmit)="saveContract(contractForm.value, contractForm.valid)" (window:resize)="beResponsive()"> 
     <div class="row"> 
     <div class="col-sm-12 col-md-12 col-lg-12"> 
      <div class="card card-inverse card-success"> 
      <div class="card-header"> 
       <strong>Personal Information</strong> 
      </div> 
      <div class="card-block"> 
       <!-- Start Phone Section --> 
       <div class="row"> 
       <div class="form-group col-sm-12 col-md-4"> 
        <label for="first_name">First Name</label> 
        <div class="input-group"> 
             <span class="input-group-addon"><i class="fa fa-user"></i> 
        </span> 

        <input (blur)="cityValidate('City *Required', 'City Name')" type="text" class="form-control" placeholder="Enter city name" id="city_address" formControlName="city_address"> 
        </div> 
       </div> 
       <div class="form-group col-sm-12 col-md-4"> 
        <label for="state_address">State</label> 
        <div class="input-group"> 
             <span class="input-group-addon"><i class="fa fa-street-view"></i> 
        </span> 

FORMGROUP

this.contractForm = new FormGroup({ 
     signatureField1 : new FormControl('',Validators.required), 
     email : new FormControl(this.contractData.email,Validators.required), 
     first_name: new FormControl(this.contractData.first_name,[ 
     Validators.required, 
     Validators.pattern("^[a-zA-Zñáéíóúü']{1,30}$") 
     ]), 
     middle_name: new FormControl(this.contractData.middle_name,[ 
     Validators.required, 
     Validators.pattern("^[a-zA-Zñáéíóúü']{1,30}$") 
     ]), 
     last_name: new FormControl(this.contractData.last_name,[ 
     Validators.required, 
     Validators.pattern("^[a-zA-Zñáéíóúü']{1,30}$") 
     ]), 
     employer: new FormControl(null, [ 
     Validators.required, 
     Validators.pattern("^[a-zA-Zñáéíóúü' ]{1,30}$") 
     ]), 
     dob : new FormControl (this.contractData.dob, [ 
     Validators.required, 
     Validators.pattern("[1][9][0-9][0-9]-[0-9][0-9]-[0-9][0-9]|[2][0][0-9][0-9]-[0-9][0-9]-[0-9][0-9]") 
     ]), 
     client_ss: new FormControl(this.contractData.client_ss, [ 
     Validators.required, 
     Validators.pattern("[0-9][0-9][0-9]-[0-9][0-9]-[0-9][0-9][0-9][0-9]|[0-9][0-9][0-9]/[0-9][0-9]/[0-9][0-9][0-9][0-9]|[0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]") 
     ]), 
     phone: new FormControl(this.contractData.phone, [ 
     Validators.required, 
     Validators.pattern("[0-9][0-9][0-9]-[0-9][0-9][0-9]-[0-9][0-9][0-9][0-9]|[0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]"), 
     ]), 
     work_phone: new FormControl(null, [ 
     Validators.required, 
     Validators.pattern("[0-9][0-9][0-9]-[0-9][0-9][0-9]-[0-9][0-9][0-9][0-9]|[0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]"), 
     ]), 
     fax_phone: new FormControl(null, [ 
     Validators.required, 
     Validators.pattern("[0-9][0-9][0-9]-[0-9][0-9][0-9]-[0-9][0-9][0-9][0-9]|[0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]"), 
     ]), 
     street_address: new FormControl (this.contractData.street_address, [ 
     Validators.required, 
     Validators.pattern("^[0-9]+ .+$") 
     ]), 
     city_address: new FormControl(this.contractData.city_address, [ 
     Validators.required, 
     Validators.pattern("^[a-zA-Zñáéíóúü' ]{1,30}$") 
     ]), 
     state_address: new FormControl(this.contractData.state_address, [ 
     Validators.required 
     ]), 
     zip_address: new FormControl(this.contractData.zip_address, [ 
     Validators.required, 
     Validators.pattern("[0-9][0-9][0-9][0-9][0-9]") 
     ]), 
     client_dl: new FormControl(null, [ 
     Validators.required 
     ]), 
     dl_state: new FormControl(null, [ 
     Validators.required 
     ]), 
    }); 

Answer 1

Sie sind zu state Text der Option zu setzen. Sie sollten die value auf state so einstellen;

<option *ngFor="let state of states" [value]="state">{{ state }}</option>