Angular ngModelChange showing duplicate value from API json data

Question

UPDATE: I have reproduced the error on Stackblitz for those who want to interact with the code. I have the following JSON data:

related_contacts: [
    {
        "id": 1,
        "relationship": "Brother",
        "date_created": "2023-07-24T22:40:16.497590+03:00",
        "date_modified": "2023-07-24T22:40:16.497590+03:00",
        "case": 170,
        "created_by": 3,
        "tenant": 2
    },
    {
        "id": 2,
        "relationship": "Wife",
        "date_created": "2023-07-24T22:40:16.507891+03:00",
        "date_modified": "2023-07-24T22:40:16.507891+03:00",
        "case": 170,
        "created_by": 3,
        "tenant": 2
    }
]

I'm trying to populate an input text field with the relationship value.

<div class="row py-3" *ngFor="let contact of case.related_contacts">
  <ng-container *ngIf="case.related_contacts.length > 1">
    <!--begin::Col-->
    <div class="col-lg-4">
      <!--begin::Label-->
      <label class="form-label text-dark fs-6">Relationship
      </label>
      <!--end::Label-->
      <!--begin::Input group-->
      <div class="form-floating mb-5">
        <input type="text" class="form-control" id="{{ contact.relationship }}" placeholder="Relationship" [ngModel]="contact.relationship" (ngModelChange)="testChange($event)" name="{{ contact.relationship }}" formControlName="relationship" autocomplete="off"/>
        <label for="state">Relationship</label>
      </div>
      <!--end::Input group-->
    </div>
    <!--end::Col-->
  </ng-container>
</div>

And im using the testChange function to see the value.

testChange($event: any) {
  console.log($event);
},

There is duplication in the fields.

and the console log also shows the duplicate

Any help on this would be appreciated.

A side note: reactive forms (formGroup) don't mix well with template-driven forms (ngModel). Stick to one recipe. — mbojko
– mbojko, Commented Jul 26, 2023 at 10:00
Decide: or use template driven Forms (input with ngModel) or ReactiveForms (inputs with formControlName). you can not use both. — Eliseo
– Eliseo, Commented Jul 26, 2023 at 10:45

mbojko · Accepted Answer · 2023-07-26 12:40:47Z

0

You're iterating twice: through editCaseForm.get('related_contacts')['controls'], and inside that loop through related_contacts instance property, not related in any way to the form. For added confusion, both ngFors use the same variable name:

<div class="collapse show" *ngFor="let contact of editCaseForm.get('related_contacts')['controls']; let i = index">
<!-- ... -->
    <div class="row py-3" *ngFor="let contact of related_contacts">

It isn't completely clear what exactly are you after, therefore I can't offer a complete solution.

EDIT: the outer contact variable is shadowed by the inner contact. And, using both ngModel and formControl you have two mechanisms fighting over control of the same input elements. The input is, on one hand, assigned ngModel from inner contact.relationship (so there should be two distinctive options), and on the other hand, is assigned to formControlName="relationship" of formGroup 0, therefore both inputs should represent the same value. Therefore, FormGroup and ngModel fight. To observe it, add

  ngOnInit() {
    this.editCaseForm.valueChanges.subscribe(console.log);
  }

The solution is still the same: pick either recipe, but not both.

edited Jul 26, 2023 at 12:40

answered Jul 26, 2023 at 11:17

mbojko

14.8k2 gold badges21 silver badges28 bronze badges

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

1 Comment

CoderS Over a year ago

This is an edit form. The outer loop is a field repeater. Then the inner one is for receiving API data. So, in case someone wants to add another related contact, the fields for a related contact (Relationship, Contact) are repeatable. I hope that is clearer.

Collectives™ on Stack Overflow

Angular ngModelChange showing duplicate value from API json data

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related