问题描述
我正在为Angular 9项目使用Angular Pattern Validation模板驱动的表单。 我有需要在表单中验证的属性列表，因此，我试图将HTML代码放入* ngFor循环中以减少代码：
<form #securityForm="ngForm" class="validation-form adeco-form" >
<ul lass="text-left" >
<div *ngFor="let data of items[0]; let i = index;">
<li class="col-xs-12 p0 pt-sm">
<div class="col-xs-10 col-lg-11 ph0 pt">
{{securitySetting.currentSecuritySettings[data].displayName}}
</div>
<div class="col-xs-2 col-lg-1">
<input class="k-textBox mb-sm col-xs-12" name="{{data}}"
[ngModel]="securitySetting.currentSecuritySettings[data].value"
required [pattern]="securitySetting.currentSecuritySettings[data].validationExpression" ref-data="ngModel">
</div>
<div *ngIf="data.errors?.pattern || data.errors?.required" class="validation-msg col-xs-12">
{{securitySetting.currentSecuritySettings[data].validationErrorMessage}}
</div>
</li>
</div>
</ul>
</form>
我的控制器如下所示：
@Component({
selector: 'app-settingssecurity',templateUrl: './settingssecurity.component.html',styleUrls: ['./settingssecurity.component.css']
})
export class SettingssecurityComponent implements OnInit {
items = [
['validate_password_regexp_minlength','validate_password_regexp_minlower','validate_password_regexp_minupper','validate_password_regexp_minnumeric','validate_password_regexp_minspecial'],['password_expiration','password_expiration_notification_enabled','password_expiration_notification'],['distinct_password_history'],['secret_answers_attempts','password_reset_expiration_delay','secret_questions_enabled'],['login_tamper_mode_attempts','login_tamper_mode_attempts_delay','login_tamper_mode_attempts_reset_delay','login_block_attempts'],['accunt_inactivity_block'],['session_inactivity_logout']
];
securitySetting = {
isPCIDSS: true,securitySettingsPCI: {},securitySettingsCustom: {},currentSecuritySettings: {},munitPMSsections: {},lockAccess: {}
};
...
}
运行此代码时，我的浏览器不会返回任何错误，并且我的表单如下所示：
任何人都知道我可以在输入名称ref-data =“ ngModel”上加上什么，或者可能需要更改其他内容才能看到表单的验证错误？
如果需要提供更多详细信息，请告诉我
解决方法
我要做的第一件事是仔细检查ngIf是否通过：
<div *ngIf="data.errors?.pattern || data.errors?.required" ...>put something here,like foobar</div>
从外观上，您试图引用“ data.errors”不是问题。 在这种情况下，数据是数组中的字符串：
let data of items[0]
items[0] =
['validate_password_regexp_minlength','validate_password_regexp_minlower','validate_password_regexp_minupper','validate_password_regexp_minnumeric','validate_password_regexp_minspecial'],要以某种形式访问元素，通常会做类似#name="ngModel"的操作，然后在其他地方说*ngIf="name.errors"。
在您的情况下，由于ngfor中的所有内容都是它自己的模板，因此它可能仍然可以工作，但是可能需要一些时髦（也许您可以执行#name{{i}}="{{data}}"之类的操作，我不确定）
听起来像是反复试验的事情，然后回传到最后！
,我实际上只是通过摆脱循环来找到解决方法：
<ul [hidden]="tabCollapseFlag[0]" class="text-left" >
<li class="col-xs-12 p0 pt-sm">
<div class="col-xs-10 col-lg-11 ph0 pt">
{{securitySetting.currentSecuritySettings[items[0][0]]?.displayName}}
</div>
<div class="col-xs-2 col-lg-1">
<input class="k-textbox mb-sm col-xs-12" name="items[0][0]"
[ngModel]="securitySetting.currentSecuritySettings[items[0][0]].value"
required [pattern]="securitySetting.currentSecuritySettings[items[0][0]].validationExpression" #input1="ngModel">
</div>
<div *ngIf="input1.errors?.pattern || input1.errors?.required" class="validation-msg col-xs-12">
{{securitySetting.currentSecuritySettings[items[0][0]].validationErrorMessage}}
</div>
</li>
<li class="col-xs-12 p0 pt-sm">
<div class="col-xs-10 col-lg-11 ph0 pt">
{{securitySetting.currentSecuritySettings[items[0][1]]?.displayName}}
</div>
<div class="col-xs-2 col-lg-1">
<input class="k-textbox mb-sm col-xs-12" name="items[0][1]"
[ngModel]="securitySetting.currentSecuritySettings[items[0][1]].value"
required [pattern]="securitySetting.currentSecuritySettings[items[0][1]].validationExpression" #input2="ngModel">
</div>
<div *ngIf="input2.errors?.pattern || input2.errors?.required" class="validation-msg col-xs-12">
{{securitySetting.currentSecuritySettings[items[0][1]].validationErrorMessage}}
</div>
</li>
<li class="col-xs-12 p0 pt-sm">
<div class="col-xs-10 col-lg-11 ph0 pt">
{{securitySetting.currentSecuritySettings[items[0][2]]?.displayName}}
</div>
<div class="col-xs-2 col-lg-1">
<input class="k-textbox mb-sm col-xs-12" name="items[0][2]"
[ngModel]="securitySetting.currentSecuritySettings[items[0][2]].value"
required [pattern]="securitySetting.currentSecuritySettings[items[0][2]].validationExpression" #input3="ngModel">
</div>
<div *ngIf="input3.errors?.pattern || input3.errors?.required" class="validation-msg col-xs-12">
{{securitySetting.currentSecuritySettings[items[0][2]].validationErrorMessage}}
</div>
</li>
<li class="col-xs-12 p0 pt-sm">
<div class="col-xs-10 col-lg-11 ph0 pt">
{{securitySetting.currentSecuritySettings[items[0][3]]?.displayName}}
</div>
<div class="col-xs-2 col-lg-1">
<input class="k-textbox mb-sm col-xs-12" name="items[0][3]"
[ngModel]="securitySetting.currentSecuritySettings[items[0][3]].value"
required [pattern]="securitySetting.currentSecuritySettings[items[0][3]].validationExpression" #input4="ngModel">
</div>
<div *ngIf="input4.errors?.pattern || input4.errors?.required" class="validation-msg col-xs-12">
{{securitySetting.currentSecuritySettings[items[0][3]].validationErrorMessage}}
</div>
</li>
<li class="col-xs-12 p0 pt-sm">
<div class="col-xs-10 col-lg-11 ph0 pt">
{{securitySetting.currentSecuritySettings[items[0][4]]?.displayName}}
</div>
<div class="col-xs-2 col-lg-1">
<input class="k-textbox mb-sm col-xs-12" name="items[0][4]"
[ngModel]="securitySetting.currentSecuritySettings[items[0][4]].value"
required [pattern]="securitySetting.currentSecuritySettings[items[0][4]].validationExpression" #input5="ngModel">
</div>
<div *ngIf="input5.errors?.pattern || input5.errors?.required" class="validation-msg col-xs-12">
{{securitySetting.currentSecuritySettings[items[0][4]].validationErrorMessage}}
</div>
</li>
</ul>
使用此html代码，我的表单可以对表单上的错误输入数据做出适当的反应： enter image description here
