Angular 2反应形式问题

Question

我有一个关于Angular 2反应形式的问题。我试图在我的反应式视图中执行两件事：

1. 在国家/地区名称下拉列表中有默认值。

2. 根据所选国家/地区名称字段更改国家/地区代码输入字段。见下面的html是。

country.ts

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

内存-data.service.ts这是我的数据库

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

如果要设置一个控制的默认值，当你建立表单，你可以做到这一点：

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

然后，我们将订阅的国家名称的变化控制更新国家代码：

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

添加新用户：

个

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

的HTML绑定将遵循以组为单位：

<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> 

使用countryName结合，而不是结合所选条目的国家增加了一些开销，我们有充分的时间做一个查找的数值变化而不是仅仅捎带我们已经存储的东西，但这就是你想要的。

这里是一个运动员：http://plnkr.co/edit/T7QcTcPKB1g7h0GbKYSu?p=preview