Angular Form Array and How to Display Error message

Question

I have a form on which a user can dynamically add multiple input boxes for a user to add an email address.

On saving of the form, I am iterating through the list of controls, build up a JSON object and call an API to check in the DB to see if the email(s) address already exists.

If it exists, I would like to display an error message below the input indicating such .ie "email already in use".

I have a form array:

ts code

        this.inviteForm = this.formBuilder.group({
        invites: this.formBuilder.array([]),
        alreadyUsedList: this.formBuilder.array([])
      });

html

<div formArrayName="invites">                                
   <div *ngFor="let unit of inviteForm.controls.invites.controls; let i=index" class="form-group">    
    <!-- The repeated alias template -->
     <div [formGroupName]="i">
      <input placeholder="" [type]="email" formControlName="invite" required/>
     </div>
     <div *ngIf="inviteForm.controls.alreadyUsedList.controls[i].controls.inUse.value == 'true'">
      <div class="email-in-use">Email already in use</div>           
     </div>
   </div>
</div>

In API response method I am attempting to set the value based on result array.

this.inviteForm.controls.alreadyUsedList.value[0].inUse = resData.Data.EmailCheck[0].AlreadyInUse

Dynamic add of email works.

API call works.

Response from API comes as expected.

PROBLEM:

Setting the value of the inUse assigns the value, however is does not result in the "Email already in use" ngIf condition being update and hence not displaying.

Any help would be appreciated.

SOLVED:

Everything was working as it should I was just not accessing the value in the array correctly in order to setValue.

this.inviteForm.controls.alreadyUsedList['controls'[0].controls['inUse'].setValue('true');

Thank you!

You have to use setValue method to set value on formControl dynamically. angular.io/api/forms/FormArray#setvalue — Chellappan வ
– Chellappan வ, Commented Jun 25, 2020 at 3:57
Hi @Chellappanவ, Thanks for the response. Yes I have to use setValue. I also discovered the manner in which I was accessing my Array value was incorrect. — Loki
– Loki, Commented Jun 25, 2020 at 4:38

Loki · Accepted Answer · 2020-06-25 04:42:41Z

1

SOLVED:

Everything was working as it should I was just not accessing the value in the array correctly in order to setValue.

this.inviteForm.controls.alreadyUsedList['controls'[0].controls['inUse'].setValue('true');

answered Jun 25, 2020 at 4:42

Loki

431 silver badge8 bronze badges

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

Collectives™ on Stack Overflow

Angular Form Array and How to Display Error message

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related