FormArray Angular 2

Question

I am trying to create new FormArray, but i only have one member in array right now, when creating new FromBuilder i have like this

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

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

And i got error like this Cannot find control with path: 'Owner -> Vehicles -> 0 -> Model'

Pierre Mallet · Accepted Answer · 2018-03-01 08:25:26Z

2

When you create a FormArray with the builder you need to pass as parameter an Array of FormControl ( or FormGroup in your case ). But you are passing an Array of plain Object instead of it.

Change

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

to

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

answered Mar 1, 2018 at 8:25

Pierre Mallet

7,2412 gold badges22 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Miomir Dancevic Over a year ago

It doesn not work, it creates Vehilces Object and then inside vehicles antoher obejct like this Vehicles {…} 0 {…} LastServiceDate 2018-03-01 Model Yaris RegistrationPlate eeee3333 Vin 3333333333333 YearManufacture 2017 But i need to be like this Vehicles {…} 0 […] LastServiceDate 2018-03-01 Model Yaris RegistrationPlate eeee3333 Vin 3333333333333 YearManufacture 2017

Pierre Mallet Over a year ago

stackblitz here => stackblitz.com/edit/ionic-c6g2ke I don't see whats wrong. The value of the form contains a Vehicules Array, with a vehicule object at index 0. What result were you expecting?

Collectives™ on Stack Overflow

FormArray Angular 2

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related