Angular 4 Template-Forms 多字段验证指令和 ngModelGroup [英] Angular 4 Template-Forms multi-field validation directive and ngModelGroup
问题描述
我正在尝试使用 Angular Directive 验证典型的 新密码 和 确认密码 匹配.即使指令正确地捕获了不匹配，也不会显示错误消息:
模板表单
<p>passwordGroup.control?.errors: {{passwordGroup.control?.errors |json}}</p></表单>
请注意 div 上围绕新密码"和确认密码"字段的 ngModelGroup.
密码指令
在您的代码中:
<input #newPasswd="ngModel" ... [(ngModel)]="newPassword" >我注意到卡拉视频中的@18:13 看起来像这样:>
尝试将两个地方的代码更改为此语法/序列，看看是否能解决问题.
提示:这是因为 newPasswd 是您的语法肯定需要的指令.
您正在使用名称中的 newPassword，而不是 # Angular 模板变量.
I am trying to validate a typical new password and confirm password match using an Angular Directive. The error message is not shown even though the directive correctly catches a mis-match:
Template Form
<form>
<md-input-container class="signup-full-width">
<input
mdInput
autocomplete="off"
type="password"
name="password"
#currentPasswd="ngModel"
placeholder="Current password"
[(ngModel)]="currentPassword"
required>
<md-error *ngIf="currentPasswd.errors && (currentPasswd.dirty || currentPasswd.touched)" [ngStyle]="{'color': 'red'}">
<div [hidden]="!currentPasswd.errors.required">Required</div>
</md-error>
</md-input-container>
<div ngModelGroup="passwordGroup" password-matcher #passwordGroup="ngModelGroup">
<md-input-container class="signup-full-width">
<input
mdInput
autocomplete="off"
type="password"
name="newPassword"
#newPasswd="ngModel"
placeholder="New password"
[(ngModel)]="newPassword"
required
minlength="8"
maxlength="15">
<md-error *ngIf="newPasswd.errors && (newPasswd.dirty || newPasswd.touched)" [ngStyle]="{'color': 'red'}">
<div [hidden]="!newPasswd.errors.required">Required</div>
<div [hidden]="!newPasswd.errors.minlength">Must be at least 8 characters</div>
<div [hidden]="!newPasswd.errors.maxlength">Must be at most 15 characters</div>
</md-error>
</md-input-container>
<md-input-container class="signup-full-width">
<input
mdInput
autocomplete="off"
type="password"
name="confirmPassword"
placeholder="Confirm password"
[(ngModel)]="confirmPassword">
<md-error *ngIf="passwordGroup.control?.errors" [ngStyle]="{'color': 'red'}">
<div [hidden]="!passwordGroup.control.errors.noMatch">Passwords do not match</div>
</md-error>
</md-input-container>
</div>
<p>passwordGroup.control?.errors: {{passwordGroup.control?.errors | json}}</p>
</form>
Please note the ngModelGroup on the div surrounding 'new password' and 'confirm passords' fields.
The password directive Angular 2 Forms | Kara Erickson
function passwordMatcher(c: AbstractControl) {
if (!c.get("newPassword") || !c.get("confirmPassword")) return null;
return c.get("newPassword").value === c.get("confirmPassword").value
? null : {"noMatch": true};
}
@Directive({
selector: '[password-matcher]',
providers: [
{provide: NG_VALIDATORS, multi: true, useValue: passwordMatcher}
]
})
export class PasswordMatcher {
}
However, the desired error message is never shown on 'Confirm Password' Input. Even though the directive appears to be working as evident from the debug output:
In your code you have:
<input #newPasswd="ngModel" ... [(ngModel)]="newPassword" >
I noticed @18:13 in Kara's video it looked like this:
<input ngModel name="password" ... #password="ngModel">
Try changing your code in both places to this syntax/sequence see if that fixes it.
Hint: It's because newPasswd is what directive would need surely with your syntax.
You are using newPassword from name, not the # Angular template variable.
这篇关于Angular 4 Template-Forms 多字段验证指令和 ngModelGroup的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
