Angular 为什么输入框和选择框没有填写它们的值

我有一个使用嵌套创建的表单，它显示一个带有电话号码的输入和一个选择来选择电话号码的类型。最初，我有一组在创建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

--代码块--

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

}

导出类PhoneDetailComponent{
电话类型：EnumProperty[]=[]；
电话形式：FormGroup；
@输入（'组'）
@Output（）rawChange:EventEmitter=neweventemitter（）；
构造函数（私有phoneTypeService:phoneTypeService，
私有表单生成器：表单生成器）{
这是.getPhoneTypes（）；
this.phoneForm=this.formBuilder.group({
phoneNumber:new FormControl（），
phoneType:new-FormControl（）
})
}
私有getPhoneTypes（）{
this.phoneTypeService.get（）
。然后（电话类型=>{
this.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（仅适用于相关零件）

导出类AppComponent{
私人版本：任何；
updateProfileForm:FormGroup；
电话号码：PhoneModel[]=[
{电话号码：“843-555-5849”，键入：“sms”}，
{电话号码：“756-555-7643”，键入：“home”}，
{电话号码：“395-555-9324”，键入：“tty”}，
{电话号码：“621-555-2690”，键入：“sms”}
]
private phoneValidator=Validators.compose([
验证器。最小长度（7），
验证程序。最大长度（16），
模式（/^\（（[0-9]{3}）\）？[-.]（[0-9]{3}）[-.]？（[0-9]{4}$/）））；
构造函数（http:http，
私有表单生成器：表单生成器）{
//显示当前使用的材质2版本。
this.version=http
.get（'https://api.github.com/repos/angular/material2-builds/commits/HEAD')
.map（res=>res.json（））
this.updateProfileForm=this.formBuilder.group({
人名：[''，[]]，
电话：this.formBuilder.array（[]）
});
控制台日志（“加载电话”）；
this.phoneNumbers.forEach（p=>this.addPhoneForm（p））；
}
私有addPhoneForm（p？：PhoneModel）{
如果（！p）{
p、 电话号码=”；
p、 类型=电话类型[0]；
}
const control=this.updateProfileForm.controls['phones']；
const phnCtrl=this.initPhoneForm（p）；
控制台日志（p）；
控制按钮（phnCtrl）；
}
私有initPhoneForm（phoneModel:phoneModel）{
console.log（phoneModel）；
返回此.formBuilder.group({
phoneNumber:[phoneModel.phoneNumber，this.phoneValidator]，
phoneType:[phoneModel.type，[]
});
}
}

我终于明白了。首先，在PhoneDetailComponent类中，我们不需要FormBuilder。它只是把事情弄糊涂了。更特别的是，它出现的原因是因为一条令人困惑的错误消息，它非常有帮助地建议我添加它。问题不在于FormBuilder，而在于我发送给PDC类的内容之间的属性不匹配

工作结果如下：

（此演示应用程序还有一个md芯片演示。我尚未解决此问题中描述的问题：）

以下是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是option元素的*ngFor的一部分。我说得对。我可能错的是FormControlName

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

电话号码是必需的
电话号码的长度为10个号码
电话类型
{{type.name}

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

private addPhoneForm（p？：PhoneModel）{
const control=this.updateProfileForm.controls['phones']；
const phnCtrl=this.initPhoneForm（p）；
控制按钮（phnCtrl）；
}
私有initPhoneForm（phoneModel？：phoneModel）{
让pModel:PhoneModel={
电话号码：“，
类型：电话类型[0]
}
if（电话型号）{
pModel=电话模型；
}
返回此.formBuilder.group({
phoneNumber:[pModel.phoneNumber，this.phoneValidator]，
电话类型：[pModel.type]
});
}

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