具有输入和动态错误验证的组件

Question

我需要带有错误验证的自定义html输入。它应该将此标签转换为带有验证的输入

您将必须以某种方式为不冲突或处于隔离范围内的输入提供名称

<field-inp name="code"
[label]="@@tables.general.code"
[(ngModel)]="selected.Code"
required
minlength="5"
maxlength="100"
alphaNum="1"
accesskey="c"
[disabled]="!editMode">
<div class="col-md-3 col-sm-6 label">Code</div>
<div class="col-md-9 col-sm-6">input</div>
</field-inp>

进入以下

<div [ngClass]="{
'has-danger': code.invalid && (code.dirty || code.touched),
'has-success': code.valid && (code.dirty || code.touched)
}" class="item spacer d-flex">
<div class="col-md-3 col-sm-6 label" i18n="@@tables.general.code">Code</div>
<div class="col-md-9 col-sm-6">
<input class="form-control" type="text"
name="code"
#code="ngModel"
[(ngModel)]="selected.Code"
required
minlength="5"
maxlength="100"
alphaNum="1"
accesskey="c"
[disabled]="!editMode">
<div *ngIf="code.errors && (code.dirty || code.touched)" class="form-control-feedback" >
<p *ngIf="code.errors.required" class="alert alert-danger"><span i18n="@@tables.general.code">c</span>&nbsp;<span i18n="@@tables.error.required">r</span></p>
<p *ngIf="code.errors.minlength" class="alert alert-danger"><span i18n="@@tables.general.code">c</span>&nbsp;<span i18n="@@tables.error.more5Chars">5</span></p>
<p *ngIf="code.errors.maxlength" class="alert alert-danger"><span i18n="@@tables.general.code">c</span>&nbsp;<span i18n="@@tables.error.less100Chars">1</span></p>
<p *ngIf="code.errors.alphaNum" class="alert alert-danger"><span i18n="@@tables.general.code">c</span>&nbsp;<span i18n="@@tables.error.alphaNum">a</span></p>
</div>
</div>

您可以根据需要添加任意数量的表格，并且所有输入都应经过验证。

我不知道如何使输入名称动态化，这样我也可以访问输入的验证和错误？