Как повторить угловой компонент два раза на одной странице без совместного использования переменной / проверки

Question

У меня есть компонент адреса, который должен быть показан в двух местах на одной странице. Внутри компонента есть элемент для идентификатора уличного строительства

<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 />

Но проблема в том, что когда я использую адрес в двух местах, они будут совместно использовать ngmodel, и оба поля сообщают об ошибке при проверке ввода.

Как я могу убедиться, что проверка связана только с ее собственным полем?

Answer 1

Передайте им отдельные модели: 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 />

Использование:

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