验证动态生成的参考模板驱动 Angular
Validation for dynamically generated reference Template Driven Angular
我正在创建一个动态表单,我正在通过模板驱动以我自己的方式进行,我不想使用反应式方法进行创建。一切正常,但只有验证给我带来了问题。我上传了我项目的一小段代码
<ng-container *ngFor="let a of UserFormArray; let i = index">
<form #f="ngForm" name="FormName">
<ng-container *ngFor="let ab of a; let i2 = index">
<ng-container *ngIf="ab.type === 'text'">
<input type={{ab.type}} pInputText name={{ab.name}} ngModel
#{{ab.name}}="ngModel" required>
<ng-container *ngIf="ab.name.errors?.required">
<div>
Input Error
</div>
</ng-container>
</ng-container>
</ng-container>
</form>
<p-button label="Click" (onClick)="sender(f)"></p-button>
</ng-container>
问题是我无法在此处进行验证,我使用的是模板驱动方法,我不想采用反应式形式,所以请不要建议反应式 link ,我的要求是使用模板驱动,我知道我错过了一件小事。但是想不通
您可以动态创建模板引用变量,但您应该知道该变量在嵌入式视图中是唯一的。
所以您可能正在寻找以下内容:
<input ... #ngModel="ngModel" required>
<ng-container *ngIf="ngModel.errors?.required">
我正在创建一个动态表单,我正在通过模板驱动以我自己的方式进行,我不想使用反应式方法进行创建。一切正常,但只有验证给我带来了问题。我上传了我项目的一小段代码
<ng-container *ngFor="let a of UserFormArray; let i = index">
<form #f="ngForm" name="FormName">
<ng-container *ngFor="let ab of a; let i2 = index">
<ng-container *ngIf="ab.type === 'text'">
<input type={{ab.type}} pInputText name={{ab.name}} ngModel
#{{ab.name}}="ngModel" required>
<ng-container *ngIf="ab.name.errors?.required">
<div>
Input Error
</div>
</ng-container>
</ng-container>
</ng-container>
</form>
<p-button label="Click" (onClick)="sender(f)"></p-button>
</ng-container>
问题是我无法在此处进行验证,我使用的是模板驱动方法,我不想采用反应式形式,所以请不要建议反应式 link ,我的要求是使用模板驱动,我知道我错过了一件小事。但是想不通
您可以动态创建模板引用变量,但您应该知道该变量在嵌入式视图中是唯一的。
所以您可能正在寻找以下内容:
<input ... #ngModel="ngModel" required>
<ng-container *ngIf="ngModel.errors?.required">