I am working with Angular Pattern Validation template driven form for my Angular 9 project. I have the list of properties which I need to validate in my form, so I am trying to put that html code in *ngFor loop to reduce my code:
<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>
and my controller looks like:
@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: {}
};
...
}
When I run this code my browser don't return any errors and my form looks like this:
but unfortunately my validate error of a pattern code doesn't work.
Anybody have an idea what can I put to my input's name, ref-data="ngModel" or maybe I need to change something else to be able to see validation error of my form?
Please let me know if I need to provide more details
