Angular Reactive Form - Error message for form control in array

Question

I have a simple reactive form in Angular with the fields using FormArray. I am getting the error status perfectly as "INVALID" for the dynamic field, but not getting the error for the control in FormArray and am unable to show the error message.

Can anyone help me to display them as well, please? For the standard field, I am getting my error, in fact it is able to be displayed in the browser.

The .ts file:

import { Component, OnInit } from '@angular/core';
import {FormGroup,FormBuilder,FormArray, Validators} from '@angular/forms'
@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
   regForm!:FormGroup;
  constructor(private fB:FormBuilder) { }

  ngOnInit(): void {
    this.regForm=this.fB.group({
      fname:['',[Validators.required,Validators.maxLength(4)]],
      mail:[''],
      pwd:[''],
      altMail:this.fB.array([])
   });
  }

  get altMail()
  {
    return this.regForm.get('altMail') as FormArray;
  }

  addNewMail()
  {
     this.altMail.push(this.fB.control('',[Validators.required,Validators.minLength(10)]))
  }

  removeMail(i:number)
  {
    this.altMail.removeAt(i)
  }
  regDataSubmit()
  {
    // alert("Data submitted successfully");
    console.log(this.regForm.controls);
     console.log(this.regForm.value);
  }

}

The HTML file:

<form [formGroup]="regForm" (ngSubmit)="regDataSubmit()">

    <label for="fname">Firstname: </label>
    <input type="text" name="fname" id="fname" formControlName="fname"><br><br>
    <div *ngIf="regForm.get('fname')?.touched">
        <div *ngIf="regForm.get('fname')?.hasError('required')">required</div>
        <div *ngIf="regForm.get('fname')?.hasError('maxlength')">maxlength 4</div>
    </div> 

    <label for="mail">Email: </label>
    <input type="email" name="mail" id="mail" formControlName="mail"><br><br>

    <button (click)="addNewMail()">Add new Email</button><br><br>

    <div formArrayName="altMail" *ngFor="let input of altMail.controls;let i=index">
        <br>
        <input type="email" [formControlName]="i">&nbsp;&nbsp;
        <button (click)=" removeMail(i)"> Remove </button>
        <div *ngIf="regForm.get('i')?.touched">
            <div *ngIf="regForm.get('i')?.hasError('required')">required</div>
            <div *ngIf="regForm.get('i')?.hasError('minlength')">minlength 5</div>
        </div>
    </div>
    <br><br>


    <label for="pwd">Password: </label>
    <input type="password" name="pwd" id="pwd" formControlName="pwd"><br><br>

    <input type="submit" value="Register" >

</form>

Yong Shun · Accepted Answer · 2022-12-06 06:33:04Z

1

You should get the form control from altMail FormArray instead of the regForm FormGroup (root).

altMail.get(i)

<div *ngIf="altMail.get(i)?.touched">
  <div *ngIf="altMail.get(i)?.hasError('required')">
    required
  </div>
  <div *ngIf="altMail.get(i)?.hasError('minlength')">
    minlength 5
  </div>
</div>

Demo @ StackBlitz

edited Dec 6, 2022 at 6:33

answered Dec 6, 2022 at 5:23

Yong Shun

54.5k6 gold badges38 silver badges66 bronze badges

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

2 Comments

Soumi Ghosh Over a year ago

Thanks. one more doubt, Why are you converting it to string by toString()?

Yong Shun Over a year ago

I updated my answer. Anyway, .toString() is not required, you can straight provide the number value.

Collectives™ on Stack Overflow

Angular Reactive Form - Error message for form control in array

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