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

但是问题是当我在两个地方使用Address时，它们将共享ngmodel，并且两个字段在验证输入时都会报告错误。

如何确保验证仅连接到其自己的字段？

Answer 1

为他们传递单独的模型：地址1，地址2

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

如何在同一页面上重复两次角度分量而不共享变量/验证

1 个答案: