私はフォームを持っており、私は、データベース内のユーザに対して有するデータに基づく値で予め充填午前角度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> 

でFormControlでコンボボックスに値を追加します。私は、このような形に

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

をすべての値を追加することですが、私は、コンボボックスに状態を追加しようとすると、それは価値を提供していません。

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

なぜこの行動が起こると、データベースに保存されたユーザーデータに基づいて、コンボボックスに値を追加するための適切な方法は何でしょうか？

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

あなたはstateにオプションのテキストを設定しています。 valueをstateに設定する必要があります。

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