相关疑难解决方法(0)

我是Angular 2的新手,并决定学习最好的方法是通过Angular官方指南.

我浏览了反应表单指南 https://angular.io/guide/reactive-forms

演示链接:https://stackblitz.com/angular/jammvmbrpxle

虽然内容总体来说非常好,但我仍然坚持如何实现更复杂的表单.在给定的示例中,每个Hero都有可能存在许多地址.地址本身就是一个扁平的对象.

如果地址有其他信息,例如位于地址的房间的颜色和类型,该怎么办？

export class Address {
    street = '';
    city   = '';
    state  = '';
    zip    = '';
    rooms = Room[];
}

export class Room {
     type = '';
}

这样表单模型看起来像这样......

createForm() {
this.heroForm = this.fb.group({
  name: '',
  secretLairs: this.fb.array([
      this.fb.group({
          street: '',
          city: '',
          state: '',
          zip: '',
          rooms: this.fb.array([
              this.fb.group({
                 type: ''
          })]),
      })]),
  power: '',
  sidekick: ''
});

}

编辑 - 与ngOnChanges一起使用的最终代码

英雄detail.component.ts

createForm() {
    this.heroForm = this.fb.group({
      name: …

我正在尝试在 formarray 中实现 formarray 但它不起作用，下面也尝试过但不起作用。

当FormArray嵌套在另一个FormArray中时如何获取FormArrayName？

有人可以帮助我在下面的代码中我做错了什么

HTML

<div [formGroup]="MainFormGroup" class="custom-auto-complete">
  <mat-radio-group matInput formControlName="Applies">
    <mat-radio-button *ngFor="let applie of applies" [value]="applie.id">{{applie.value}}</mat-radio-button>
  </mat-radio-group>           
  <div formArrayName="FormArrayOne">
    <div *ngFor="let mains of MainFormGroup.get('FormArrayOne')['controls']; let i=index">
      <div [formGroupName]="i">
        <mat-icon *ngIf="MainFormGroup.get('FormArrayOne').length > 1" (click)="removeMarket(i)">remove_circle</mat-icon>
        <mat-icon (click)="addOne()"> add_circle</mat-icon>
        <mat-form-field>
          <input matInput formControlName="OneField" value="">
        </mat-form-field>
        <div formArrayName="FormArrayTwo">
          <div *ngFor="let Market of MainFormGroup.get('FormArrayTwo')['controls']; let j=index" >
            <div [formGroupName]="j">            
              <mat-form-field class="formfieldsControl">
                <input matInput formControlName="Destination">
              </mat-form-field>
            </div>
          </div>
        </div>         
      </div>
    </div>
  </div>    
</div>

TS

public ngOnInit() {
  this.MaintFormGroup = this._fb.group({
    Applies : …