为什么输入和选择框在他们的价值观

Question

我有一个表格填写不，创建使用嵌套，即显示了一个电话号码和一个选择的输入选择的电话号码的类型。最初，我有一套我正在尝试赋予formGroup创建的值。但是，当选择框获得选项时，它不会选择预定义的值。输入框也不会收到预定义的值。

在app.component.ts:57，我正在采取我的预定义值的数组并分别解析它们并调用addPhoneForm方法。

的addPhoneForm方法还利用了initPhoneForm方法。这些，携手合作，共创手机形式，可以对app.component.html 33线可以看出。

我想是不是被填写的原因是因为我也有我的PhoneDetailComponent构造函数中执行以下代码：

this.phoneForm = this.formBuilder.group({ 
    phoneNumber: new FormControl(), 
    phoneType: new FormControl() 
}) 

但是，如果没有的代码位，我得到一个错误，指出formGroup预期一个FormGroup。

这里是我工作的plnkr。 http://plnkr.co/edit/qv1BX7WtpYhw5B92SuoC?p=preview

- 代码块 -

- 电话-detail.component.ts

export class PhoneDetailComponent { 

    phoneTypes: EnumProperty[] = []; 
    phoneForm: FormGroup; 

    @Input('group') 
    @Output() rawChange: EventEmitter<string> = new EventEmitter<string>(); 


    constructor(private phoneTypeService: PhoneTypeService, 
       private formBuilder: FormBuilder) { 
     this.getPhoneTypes(); 
     this.phoneForm = this.formBuilder.group({ 
     phoneNumber: new FormControl(), 
     phoneType: new FormControl() 
     }) 
    } 

    private getPhoneTypes() { 
     this.phoneTypeService.get() 
     .then(phoneTypes => { 
      this.phoneTypes = phoneTypes; 
     }) 
    } 

} 

- app.component.html：31-36

<div formArrayName="phones"> 
    <div *ngFor="let phone of updateProfileForm.controls.phones.controls; let i=index"> 
     <phone [group]="updateProfileForm.controls.phones.controls[i]"></phone> 
    </div> 
    </div> 
    <a (click)="addPhoneForm()">+ Add another phone number</a> 

- - app.component.ts（仅限相关部分）

export class AppComponent { 

    private version: any; 
    updateProfileForm: FormGroup; 

    phoneNumbers: PhoneModel[] = [ 
    { phoneNumber: "843-555-5849", type: "sms" }, 
    { phoneNumber: "756-555-7643", type: "home"}, 
    { phoneNumber: "395-555-9324", type: "tty" }, 
    { phoneNumber: "621-555-2690", type: "sms" } 
    ] 

    private phoneValidator = Validators.compose([ 
    Validators.minLength(7), 
    Validators.maxLength(16), 
    Validators.pattern(/^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/) ]); 

    constructor(http: Http, 
       private formBuilder: FormBuilder) { 
    // Display the currently used Material 2 version. 
    this.version = http 
     .get('https://api.github.com/repos/angular/material2-builds/commits/HEAD') 
     .map(res => res.json()) 

     this.updateProfileForm = this.formBuilder.group({ 
     personNames: ['', []], 
     phones: this.formBuilder.array([]) 
     }); 

     console.log("Loading phones"); 
     this.phoneNumbers.forEach(p => this.addPhoneForm(p)); 
    } 

    private addPhoneForm(p?: PhoneModel) { 
    if (!p) { 
     p.phoneNumber = ""; 
     p.type = PHONE_TYPES[0]; 
    } 

    const control = <FormArray>this.updateProfileForm.controls['phones']; 
    const phnCtrl = this.initPhoneForm(p); 

    console.log(p); 

    control.push(phnCtrl); 
    } 

    private initPhoneForm(phoneModel: PhoneModel) { 
    console.log(phoneModel); 
    return this.formBuilder.group({ 
     phoneNumber: [ phoneModel.phoneNumber, this.phoneValidator ], 
     phoneType: [ phoneModel.type, [] ] 
    }); 
    } 
} 

Answer 1

我终于明白了。首先，在PhoneDetailComponent类中，我们不需要FormBuilder。它只是混淆了事情。更特别的是，它出现的原因是因为有一个令人困惑的错误消息，它非常有帮助地表明我添加了它。问题不是FormBuilder，而是我发送到PDC类的属性不匹配。

工作的结果是在这里：http://plnkr.co/edit/qv1BX7WtpYhw5B92SuoC?p=preview

（该演示应用程序也有一个MD-芯片演示去，我还没有解决它在此提到的问题：How to set the select element's value of a dynamically created form in angular2）

这里是如何PhoneDetailComponent类应该看起来如下：

export class PhoneDetailComponent { 

    @Input('group') 
    phoneForm: FormGroup; 
    phoneTypes: EnumProperty[]; 

    constructor(private phoneTypeService: PhoneTypeService) { 
     this.getTypes(); 
    } 

    getTypes() { 
     this.phoneTypeService.get() 
     .then(phoneTypes => { 
      this.phoneTypes = phoneTypes; 
     }); 
     } 
} 

坏我......我没有发布phone-detail.component.html相关的代码。但我可能有一个错误。这是html应该看起来的样子。请注意phoneTypes是选项元素的* ngFor的一部分。我有这个正确的。我可能有错的是formControlNames。

<div [formGroup]="phoneForm"> 
    <div class="form-group col-xs-6"> 
     <md-input-container> 
      <input mdInput 
        type="text" 
        placeholder="Phone" 
        formControlName="phoneNumber" 
        (rawChange)="rawPhone=$event" 
        [attr.maxlength]="14" 
      > 
      <md-hint *ngIf="phoneForm.controls['phoneNumber'].hasError('required') && phoneForm.controls['phoneNumber'].touched" 
        class="text-danger"> 
       Phone number is required 
      </md-hint> 
      <md-hint *ngIf="phoneForm.controls['phoneNumber'].hasError('minlength') && phoneForm.controls['phoneNumber'].touched" 
        class="text-danger"> 
       Phone number is to be 10 numbers long 
      </md-hint> 
     </md-input-container> 
    </div> 
    <div class="form-group col-xs-6"> 
     <label>Phone Type</label> 
     <select class="form-control" formControlName="phoneType"> 
      <option *ngFor="let type of phoneTypes" 
        value="{{type.code}}" 
        title="{{type.description}}"> 
       {{type.name}} 
      </option> 
     </select> 
    </div> 
</div> 

app.component.ts文件是我初始化手机组件的地方。确保将formControlNames与您在组中设置的内容进行匹配。

private addPhoneForm(p?: PhoneModel) { 
    const control = <FormArray>this.updateProfileForm.controls['phones']; 
    const phnCtrl = this.initPhoneForm(p); 

    control.push(phnCtrl); 
    } 

    private initPhoneForm(phoneModel?: PhoneModel) { 
    let pModel: PhoneModel = { 
     phoneNumber: "", 
     type: PHONE_TYPES[0] 
    } 

    if (phoneModel) { 
     pModel = phoneModel; 
    } 

    return this.formBuilder.group({ 
     phoneNumber: [ pModel.phoneNumber, this.phoneValidator ], 
     phoneType: [ pModel.type ] 
    }); 
    }