Dynamic form input validation using angular 11

Question

I have created dynamic form inputs in angular11. need to validate the form fields which added dynamically by clicking add button. i couldnt found the right solutions. here is my code

in component.ts file

this.pollAdd = this.fb.group({
      question: ['',Validators.required],
      queChoices:this.fb.array([this.createChoice()]),
    });

addChoice(){
    this.queChoices=this.pollAdd.get('queChoices') as FormArray;
    this.queChoices.push(this.createChoice());
  }

  createChoice():FormGroup{
    return this.fb.group({
      choice:['',Validators.required],
    })
  }

get f() { return this.pollAdd.controls; }

In component.html file

<div formArrayName="queChoices" *ngFor="let choices of pollAdd.get('queChoices')['controls'];let i=index;">
        <mat-form-field class="ch__custom_input w-100 mt-3" [formGroupName]="i">
          <mat-label>Choice {{i+1}}</mat-label>
          <input matInput formControlName="choice" autofocus/>
        </mat-form-field>
      </div>

how to validate each choice field?

Does this answer your question? Angular FormArray display validation errors — Aman Gojariya
– Aman Gojariya, Commented Apr 15, 2021 at 5:46

Transformer · Accepted Answer · 2021-04-15 03:26:28Z

1

Get the name and check if there is an error, just like a regular form.

<div *ngIf="choice.errors?.required">Choice is required</div>

answered Apr 15, 2021 at 3:26

Transformer

7,4993 gold badges29 silver badges57 bronze badges

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

3 Comments

manikandan Over a year ago

its showing console error ERROR TypeError: Cannot read property 'errors' of undefined

Lazar Ljubenović Over a year ago

You can't just blindly copy and paste code from the answer.

manikandan Over a year ago

yes i have tried but its showing errors undefined error

manikandan · Accepted Answer · 2021-04-16 02:25:05Z

0

<div *ngIf="choices.controls['choice'].errors && choices.controls['choice'].touched">
            <mat-error *ngIf="choices.controls['choice'].errors?.required">Choice {{i+1}} is required!</mat-error>
          </div>

Its working for me...

answered Apr 16, 2021 at 2:25

manikandan

8132 gold badges11 silver badges23 bronze badges

1 Comment

Eliseo Over a year ago

using mat-error, if you has only an unique error, you needn't use *ngIf

Eliseo · Accepted Answer · 2021-04-16 09:11:52Z

using mat-error, if we only has an unique error, we needn't use *ngIf, so is simply

    <mat-error>required</mat-error>

We also use a function like

  getErrorMessage(inputRef:MatFormField) {
    const control=inputRef._control?inputRef._control.ngControl:null;
    if (!control || !control.errors)
      return null;
    if (control.hasError('required')) {
      return 'You must enter a value';
    }

    return control.hasError('email') ? 'Not a valid email' : '';
  }

And pass the mat-field to the function getErrorMessage using a template reference variable

      <mat-form-field #inputRef appearance="fill">
        <mat-label>Enter your email</mat-label>
        <input  matInput placeholder="[email protected]" [formControl]="email" required>
        <mat-error  >{{getErrorMessage(inputRef)}}</mat-error>
      </mat-form-field>

Collectives™ on Stack Overflow

Dynamic form input validation using angular 11

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related