How to repeat an angular component two times on the same page without sharing variable / validation

Question

I have an address component that need to be shown two places on the same page. Inside the component there is an element for the streetbuilding identifier

<label for="StreetNumber">Husnummer</label>
<input id="StreetNumber" name="streetNumber" #streetNumber="ngModel" type="text" class="form-control"
        [(ngModel)]="Address.StreetBuildingIdentifier" [ngClass]="{ 'is-invalid': (streetNumber.dirty || streetNumber.touched || this.TabIsViewed) && streetNumber.errors }" required StreetBuildingIdentifier />

But the problem is when I use the Address two places they will share the ngmodel and both fields reports error when validating the input.

How can I make sure the validation is connected to its own field only?

For the duplicate `id`, take a look at [this answer](https://stackoverflow.com/a/56587030/1009922). — ConnorsFan, Jun 14 '19 at 13:08
I want to be able to store different values and the should validate each own value independently. Maybe i wrote bad headline.. — Jepzen, Jun 14 '19 at 13:16

Antoine · Answer 1 · 2019-06-14T17:44:29.327

Pass them separate models: Address1, Address2

export class AddressComponent {  
   @Input() streetNumberFromParent: any;

address.component.ts:

<input id="StreetNumber" name="streetNumber" #streetNumber="ngModel" type="text" class="form-control"
        [(ngModel)]="streetNumberFromParent" [ngClass]="{ 'is-invalid': (streetNumber.dirty || streetNumber.touched || this.TabIsViewed) && streetNumber.errors }" required StreetBuildingIdentifier />

Usage:

<address-component [streetNumber]="parentObjectAddress1">
...
<address-component [streetNumber]="parentObjectAddress2">

How to repeat an angular component two times on the same page without sharing variable / validation

1 Answers1