CODEWITHSUNDEEP
angularangular-reactive-formsformarray
Soumi Ghosh
Soumi Ghosh

Reputation: 119

Angular Reactive Form - Error message for form control in array

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>

Upvotes: 0

Views: 1528

Answers (1)

Yong Shun
Yong Shun

Reputation: 51125

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

Upvotes: 1

Related Questions