Form array validation with class

Question

I have form with implemented form array but here i can not validate basically i do not know how to get controls from form array. I have an error that controls of undefined.

Here you can see my code what i have tried

<form [formGroup]="myForm">

    <div formArrayName="addresses" >
        <div *ngFor="let address of myForm.controls.addresses.controls; let i=index" class="panel panel-default">

            <div [formGroupName]="i" class="myform">
                <label>street</label>
                <input type="text" class="form-control" formControlName="street" [class.valid]="address.street.valid"><br><br>
                <label>postcode</label>
                <input type="text" class="form-control" formControlName="postcode">
            </div><br><br>
        </div>
    </div><br><br>
        <pre>form value: <br>{{myForm.value | json}}</pre>
</form>

you can see full working example here

https://stackblitz.com/edit/angular-r4jruv?file=app%2Fapp.component.html

Tomasz Kula · Accepted Answer · 2018-04-23 08:59:19Z

1

First, add a getter to your component to shorten the access path for your FormArray controls.

component.ts

fa: FormArray;

ngOnInit() {
  const fa = this._fb.array([
    this.initAddress(),
  ]);

  this.fa = fa;

  this.myForm = this._fb.group({
    addresses: fa
  });
}

Next, update the html

component.html

<div *ngFor="let address of fa.controls; let i=index" class="panel panel-default">
  <div [formGroupName]="i" class="myform">
    <label>street</label>
    <input type="text" class="form-control" formControlName="street" [class.valid]="address.valid"><br><br>
  </div>
</div>

Live demo

answered Apr 23, 2018 at 8:59

Tomasz Kula

16.9k3 gold badges71 silver badges82 bronze badges

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

2 Comments

U rock Over a year ago

Yes this is also working perfect thank you @Tomasz Kula

Tomasz Kula Over a year ago

Glad I could help :)

Mohammad Waleed · Accepted Answer · 2018-04-23 08:54:40Z

you are accessing street directly from address but it's actually in address.controls

<form [formGroup]="myForm">

<div formArrayName="addresses" >
    <div *ngFor="let address of myForm.controls.addresses.controls; let i=index" class="panel panel-default">

        <div [formGroupName]="i" class="myform">
            <label>street</label>
            <input type="text" class="form-control" formControlName="street" [class.valid]="address.controls.street.valid"><br><br>
            <label>postcode</label>
            <input type="text" class="form-control" formControlName="postcode">
        </div><br><br>
    </div>
</div><br><br>
    <pre>form value: <br>{{myForm.value | json}}</pre>
</form>

this should work

ibenjelloun · Accepted Answer · 2018-04-23 08:56:20Z

0

You could use the form control status :

<input ... [class.valid]="address.status === 'VALID'">

Here is an edit of your stackblitz.

answered Apr 23, 2018 at 8:56

ibenjelloun

7,7732 gold badges34 silver badges55 bronze badges

4 Comments

U rock Over a year ago

But here i can not track the status like touched and dirty. Is it possible.

ibenjelloun Over a year ago

You could use address.pristine and address.dirty. I edited the stackblitz.

ibenjelloun Over a year ago

As suggested by @Tomas Kula, using address.valid is better.

U rock Over a year ago

So it is not possible track touched using staus method. Anyway i am going to use @Waleed answer Thank you @ ibenjelloun for your help.

Collectives™ on Stack Overflow

Form array validation with class

3 Answers 3

2 Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related