Problem with validatons inside a FormArray

Question

I am new to angular and I am currently building a website in angular, Im facing a problem that I cant solve with the angular documentation Im not quite understanding what's going on behind the problem.

In few words, I have a formArray(updateAddress) which contains a formGroup and some formControl's inside and I'm having a hard time trying to make the validations for it.

Code HTML:

<form [formGroup]="profileForm">
<div *ngFor="let add of updateAddress().controls; let addIndex=index">
    <div formArrayName="updateAddress">
      <div [formGroupName]="addIndex">
        <label>
          Rua:
          <input type="text" formControlName="address">
        </label>
        <div
          *ngIf="profileForm.get('add.address')?.invalid && (address.get('add.address')?.dirty || profileForm.get('add.address')?.touched)">
          <div *ngIf="profileForm.get('add.address')?.errors?.required">
            Tem de escrever a rua da sua loja.
          </div>
        </div>
<button (click)="removeAddress(addIndex)">Remover</button>
      </div>
    </div>
  </div>
  <button type="button" (click)="addAddress()">Adicionar Morada</button>
</form>

Code TS:

  profileForm: FormGroup;

  control: any;

  
  constructor(
              public formBuilder: FormBuilder,
              private cd: ChangeDetectorRef
             ) {

    this.profileForm = this.formBuilder.group({
      file: [''],
      name: new FormControl('', [Validators.required, Validators.pattern('[a-zA-Z ]*')]),
      email: new FormControl('',  [Validators.required, Validators.pattern("^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$")]),
      password: new FormControl('',[Validators.required, Validators.minLength(7),Validators.pattern('(?=.*[A-Za-z])(?=.*[0-9])(?=.*[$@$!#^~%*?&,.<>"\'\\;:\{\\\}\\\[\\\]\\\|\\\+\\\-\\\=\\\_\\\)\\\(\\\)\\\`\\\/\\\\\\]])[A-Za-z0-9\d$@].{7,}')]),
      password2: new FormControl('', Validators.required),
      nif: new FormControl('',[Validators.required, Validators.pattern('\\d{9}')]),
      birthDate: new FormControl('',[Validators.required, Validators.pattern("^(0[1-9]|[12][0-9]|3[01])[/.](0[1-9]|1[012])[/.](19|20)\\d\\d$") ]),
      phoneNumber: new FormControl('', [Validators.required, Validators.pattern('\\d{9}')]),
      updateAddress: new FormArray([], Validators.required)
    });
   }

  updateAddress(): FormArray {
        return this.profileForm.get("updateAddress") as FormArray
  }

  newAddress(): FormGroup {
      return this.formBuilder.group({
        address: new FormControl('', Validators.required),
        address2: new FormControl('', Validators.required),
        postalCode: new FormControl('', Validators.required),
        city: new FormControl('', Validators.required),
        area: new FormControl('', Validators.required)
      })
  }

  addAddress() {
      this.updateAddress().push(this.newAddress());
  }
  
  removeAddress(addIndex:number) {
    this.updateAddress().removeAt(addIndex);
  }

I really cant solve the problem in this validation because the validation feels like it goes through but doesnt appear any error in the webpage also I dont know if Im approaching this the right way or not aswell.

image comproving the validation is working because submit is disabled but not sending a error when it should send under the "Rua" input

If someone can guide me or help I'll gladly appreciate it!

UPDATE

As I said I think the validation works on the background but the error text that should appear just doesnt appear because Im not getting the ngIf right(I think)

Answer 1

Some items to note

You can initiate your form like below using FormBuilder

    this.profileForm = this.formBuilder.group({
      file: [''],
      name: ['', [Validators.required, Validators.pattern('[a-zA-Z ]*')]],
      email: ['',  [Validators.required, Validators.pattern("^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$")]],
      password: ['',[Validators.required, Validators.minLength(7),Validators.pattern('(?=.*[A-Za-z])(?=.*[0-9])(?=.*[$@$!#^~%*?&,.<>"\'\\;:\{\\\}\\\[\\\]\\\|\\\+\\\-\\\=\\\_\\\)\\\(\\\)\\\`\\\/\\\\\\]])[A-Za-z0-9\d$@].{7,}')]],
      password2: ['', Validators.required],
      nif: ['',[Validators.required, Validators.pattern('\\d{9}')]],
      birthDate: ['',[Validators.required, Validators.pattern("^(0[1-9]|[12][0-9]|3[01])[/.](0[1-9]|1[012])[/.](19|20)\\d\\d$") ]],
      phoneNumber: ['', [Validators.required, Validators.pattern('\\d{9}')]],
      updateAddress: this.formBuilder.array([], Validators.required)
    });

    newAddress(): FormGroup {
      return this.formBuilder.group({
        address: ['', Validators.required],
        address2: ['', Validators.required],
        postalCode: ['', Validators.required],
        city: ['', Validators.required],
        area: ['', Validators.required]
      })
  }

You can alse change updateAddress to a getter

  get updateAddress(): FormArray {
    return this.profileForm.get("updateAddress") as FormArray
  }

To the problem

I believe the problem is in how you are trying to retrieve the errors

Try to use formGroup.get('control_name').errors in your case, the validation is applied to the controls inside the formArray so we need to access this and get the errors, something like

add.get('address').errors?.required

Below is a sample html.

  <ng-container formArrayName="updateAddress">
    <div *ngFor="let add of updateAddress.controls; let addIndex=index">
      <div [formGroupName]="addIndex">
        <label>
          Rua:
          <input type="text" formControlName="address">
        </label>

        <div *ngIf="add.get('address').invalid && (add.get('address').dirty || add.get('address').touched)">
          <div *ngIf="add.get('address').errors?.required">
            Tem de escrever a rua da sua loja.
          </div>
        </div>
        <button (click)="removeAddress(addIndex)">Remover</button>
      </div>
    </div>
    <button type="button" (click)="addAddress()">Adicionar Morada</button>
  </ng-container>

You can have a look at This stackblitz demo

Edit

To initializa value for the form you can use setValue or patchValue. Something like below

   this.updateAddress.at(0).setValue({
      address: "My Address",
      address2: "My Address 2",
      postalCode: "77777",
      city: "Helsinki",
      area: "Some street"
    });

See this demo

Answer 2

Using Validators.required at FormArray level. It means the size of FormArray must be greater than zero.

Individual validators on newAddress FormGroup fields like address', 'address2 with check each field.

To better see what is happending add this line inside the form array loop:

 <pre> {{ 'invalid: ' + add.invalid + ', dirty: ' + add.dirty + ', touched: ' + add.touched }} </pre>

also display the whole form array errors

{{ profileForm.controls['updateAddress'].errors | json }}

Stackblitz

Answer 3

In Angular 10 (I think that neither in Angular 9 -but yes in Angular 7 and Angular 8-), you can not use the variable "add" to access to the FormGroup

So, to access to a FormControl inside a FormGroup inside a FromArray you can concatenate the formArrayName, the index and the formControlName using "."

formName.get(formArrayName+"."+index+"."+formControlName)

//in your case:
profileForm.get('updateAddress.'+addIndex+'.address')
//e.g.
<div *ngIf="profileForm.get('updateAddress.'+addIndex+'.address').touched &&
     profileForm.get('updateAddress.'+addIndex+'.address').errors?.required">
        Tem de escrever a rua da sua loja.
</div>

Other way is, as you has a getter of the FormArray -really it's not a getter, your should convert to getter-

//in your case:
 updateAddress().at(addIndex).get('address')
//e.g.
<div *ngIf="updateAddress().at(addIndex).get('address').touched &&
     updateAddress().at(addIndex).get('address').errors?.required">
        Tem de escrever a rua da sua loja.
</div>

Answer 4

Single Form

<form [formGroup]="formGroup" #ngForm="ngForm">
   <div>
      <input formControlName="firstName">
      <div class="error" *ngIf="
                            ngForm.submitted &&
                            formGroup.controls['firstName'].invalid &&
                            formGroup.controls['firstName'].touched" > </div>
   </div>

   <div>
      <input formControlName="lastName">
   </div>

  <button type="submit">Submit</button>

</form>

formGroup = new FormGroup({
   firstName: new FormControl('',[ Validators.minlength(3) ]), 
   lastName : new FormControl('', [ ])
})

OR use formControl

<input [formControl]="formControl"/>

const formControl = new FormControl('',[]); 

OR dynamically add the FormControls to the FormGroup.

<form [formGroup]="formGroup">
    <input formControlName="firstName"  *ngIf="firstNameActive"/>
    <input formControlName="lastName"  *ngIf="lastNameActive"/>
</form>

We should provide the input field for each FormControl.

  firstNameActive = false; 
  lastNameActive = false; 

  formGroup = new FormGroup({});

  addFirstName(){ 
      // Adding the form Control.
     formGroup.addControl('firstName', new FormControl(''))
     firstNameActive = true; 
  }
 
  removeFirstName(){ 
     // Removing the form control
     this.formGroup.removeControl('firstName')
     firstNameActive = false; 
  }

Tip

There are observable properties in the form control and form group. I highly recommend you to use them in order to monitor form's validation status and value status.

formGroup.statusChanges
formGroup.valueChanges

formControl.statusChanges
formControl.valueChanges

https://angular.io/guide/reactive-forms

https://rxjs-dev.firebaseapp.com/guide/overview

Let's talk about the FormArray.

1. we should provide the html input element for each FormControl created in the FormGroup with either formControlName or formControl in template file.

2. each formControlName in a html form element should be unique, formControlName represent the corresponding FormControl.

3. In this case, we will be using the same fields so we need a different form in our template file for each dynamically added address form.

Template

<button type="button" (click)="addNewAddressForm()">
  Add New Address Form
</button>

<hr />
<br />


<form *ngFor="let form of groups()" [formGroup]="toFormGroup(form)">
  <label>
    City
    <input formControlName="city" />
    <div class="error" *ngIf="form.controls.city.invalid">City is invalid!</div>
  </label>
  <br />

  <label for="state">
    State
    <input formControlName="state" />
    <div class="error" *ngIf="form.controls.state.invalid">
      State is invalid!
    </div>
  </label>
</form>

<button type="button" (click)="submitForm()">Submit Address Form</button>
<br />

<strong>All Forms Value: </strong>{{ forms.valueChanges | async | json }}
<br />
<strong>All Forms State: </strong>{{ forms.statusChanges | async | json }}

Component TS

import { Component, OnInit } from '@angular/core';
import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-form-example',
  templateUrl: './form-example.component.html',
  styleUrls: ['./form-example.component.scss'],
})
export class FormExampleComponent implements OnInit {
  forms = new FormArray([], Validators.required);

  ngOnInit(): void {
    this.forms.valueChanges.subscribe((data) => {
      console.log(data);
    });
  }

  toFormGroup(f: any) {
    return f as FormGroup;
  }

  groups() {
    return this.forms.controls as FormGroup[];
  }

  controlNames(fg: FormGroup) {
    return Object.keys(fg.controls);
  }

  addNewAddressForm() {
    this.forms.push(
      new FormGroup({
        city: new FormControl('', [Validators.required]),
        state: new FormControl('', [
          Validators.required,
          Validators.minLength(5),
        ]),
      })
    );
  }

  submitForm() {
    console.log('Submitting Form: ', this.forms.value);
  }
}

Answer 5

Let's combine the FormGroup with FormArray

Template File

<form [formGroup]="profileForm">
  <label>
    firstName
    <input formControlName="firstName" />
    <div class="error" *ngIf="profileForm.controls['firstName'].invalid">
      Not Valid
    </div>
  </label>
  <br />

  <label>
    lastName
    <input formControlName="lastName" />
    <div class="error" *ngIf="profileForm.controls['lastName'].invalid">
      Not Valid
    </div>
  </label>
  <br />

  <form
    [formGroup]="addressFormGroup"
    *ngFor="let addressFormGroup of addressFormGroups()"
  >
    <label>
      City
      <input formControlName="city" />
      <!-- <div class="error" *ngIf="form.controls.city.invalid"> -->
      <div class="error" *ngIf="addressFormGroup.controls['city'].invalid">
        Not Valid
      </div>
      <!-- </div> -->
    </label>
    <br />

    <label for="state">
      State
      <input formControlName="state" />
      <div class="error" *ngIf="addressFormGroup.controls['state'].invalid">
        Not Valid
      </div>
    </label>
  </form>
  <hr />
  <button type="button" (click)="addNewAddressForm()">
    Add Another Address
  </button>
</form>

<button type="button" (click)="submitForm()">Submit Address Form</button>
<br />

<strong> Form Value: </strong>{{ profileForm.valueChanges | async | json }}
<br />
<strong> Form State: </strong>{{ profileForm.statusChanges | async | json }}

Component TS File

import { Component, OnInit } from '@angular/core';
import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-form-example',
  templateUrl: './form-example.component.html',
  styleUrls: ['./form-example.component.scss'],
})
export class FormExampleComponent implements OnInit {
  profileForm = new FormGroup({
    firstName: new FormControl('', [Validators.required]),
    lastName: new FormControl('', [Validators.required]),
    address: new FormArray([this.newAddressForm()], [Validators.required]),
  });

  newAddressForm() {
    return new FormGroup({
      city: new FormControl('', Validators.required),
      state: new FormControl('', Validators.required),
    });
  }

  ngOnInit(): void {
    this.profileForm.valueChanges.subscribe((data) => {
      console.log(data);
    });
  }

  toFormGroup(f: any) {
    return f as FormGroup;
  }

  addressFormInstance() {
    return this.profileForm.controls.address as FormArray;
  }

  addressFormGroups() {
    return this.addressFormInstance().controls as FormGroup[];
  }

  addNewAddressForm() {
    this.addressFormInstance().push(this.newAddressForm());
  }

  toErrorMessages(errors: any) {
    return Object.values(errors);
  }

  submitForm() {
    console.log('Submitting Form: ', this.profileForm.value);
  }
}

CSS file

form {
  border: 3px solid black;
  border-radius: 5px;
  padding: 10px;
  margin: 5px;
}

.error {
  color: red;
}