表格数组 Angular 2

Question

我正在尝试创建新的 FormArray，但我现在在数组中只有一个成员，在创建新的 FromBuilder 时我有这样的

public myAccountForm: FormGroup;

  ngOnInit() {
    this.myAccountForm = this._fb.group({
      FullName: ['', Validators.compose([
        Validators.required
      ])],
      Email: ['', Validators.compose([
        Validators.required
      ])],
      Owner: this._fb.group({
        IsOwner: [false],
        Vehicles: this._fb.array([{
          Model: '',
          Vin: '',
          YearManufacture: '',
          RegistrationPlate: '',
          LastServiceDate: ''
        }])
      })
    });

和HTML

<form class="list-form" role="form" (ngSubmit)="onSubmitMyAccount(myAccountForm)" [formGroup]="myAccountForm">
    <ion-item>
        <ion-label color="primary" stacked>
            {{"Full Name" | translate }}:
        </ion-label>
        <ion-input type="text" formControlName="FullName" value="{{userFullName}}"></ion-input>
    </ion-item>
    <p ion-text color="danger" class="text-1x has-error" *ngIf="myAccountForm.get('FullName').touched && myAccountForm.get('FullName').hasError('required')">{{"This field is required" | translate }}</p>
    <ion-item>
        <ion-label color="primary" stacked>
            {{"Email Address" | translate }}:
        </ion-label>
        <ion-input type="email" formControlName="Email" disabled value="{{userEmail}}"></ion-input>
    </ion-item>
    <p ion-text color="danger" class="text-1x has-error" *ngIf="myAccountForm.get('Email').touched && myAccountForm.get('Email').hasError('required')">{{"This field is required" | translate }}</p>
    <div formGroupName="Owner" class="m-t-15">
        <p>{{"Are you owner?" | translate }}</p>
        <ion-item radio-group margin-top class="no-border">
            <ion-label>{{"Yes" | translate }}</ion-label>
            <ion-checkbox color="white" checked="true" value="true" formControlName="IsOwner" (ionChange)="getIsOwner($event)"></ion-checkbox>
        </ion-item>
        <div formArrayName="Vehicles" *ngIf="isOwner">

            <ion-list [formGroupName]="0">

                <ion-item>
                    <ion-label color="primary" stacked>
                        {{"Model" | translate }}:
                    </ion-label>
                    <ion-input type="text" formControlName="Model" value="{{userModel}}"></ion-input>
                </ion-item>
                <ion-item>
                    <ion-label color="primary" stacked>
                        {{"VIN Number" | translate }}:
                    </ion-label>
                    <ion-input type="text" formControlName="Vin"></ion-input>
                </ion-item>
                <ion-item>
                    <ion-label color="primary" stacked>
                        {{"Year Manufactured" | translate }}:
                    </ion-label>
                    <ion-datetime displayFormat="YYYY" formControlName="YearManufacture"></ion-datetime>
                </ion-item>
                <ion-item>
                    <ion-label color="primary" stacked>
                        {{"Registration Plate" | translate }}:
                    </ion-label>
                    <ion-input type="text" formControlName="RegistrationPlate"></ion-input>
                </ion-item>
                <ion-item>
                    <ion-label color="primary" stacked>
                        {{"Last Service Date" | translate }}:
                    </ion-label>
                    <ion-datetime displayFormat="MM/DD/YYYY" formControlName="LastServiceDate"></ion-datetime>
                </ion-item>
            </ion-list>

        </div>
    </div>
    <div class="m-t-30">
        <button ion-button round block class="m-b-10" color="primary" type="submit" [disabled]="!myAccountForm.valid">
                  {{"Edit" | translate }}
                </button>
    </div>
</form>

我遇到了这样的错误 找不到路径为控件：'Owner -> Vehicles -> 0 -> Model'

Answer 1

当您使用构建器创建 FormArray 时，您需要将 FormControl 数组（或您的情况下的 FormGroup ）作为参数传递。但是您传递的是普通对象数组而不是它。

改变

    Vehicles: this._fb.array([{
      Model: '',
      Vin: '',
      YearManufacture: '',
      RegistrationPlate: '',
      LastServiceDate: ''
    }])

到

    Vehicles: this._fb.array([this._fb.group({
      Model: '',
      Vin: '',
      YearManufacture: '',
      RegistrationPlate: '',
      LastServiceDate: ''
    })])

表格数组 Angular 2

FormArray Angular 2

angular

angular-reactive-forms