关键字

时间:2017-03-14 10:00:34

标签: validation angular angular2-formbuilder

我有这段代码:

this.form = fb.group({
        username: ['', Validators.compose([Validators.required])],
        fullName: ['', Validators.compose([Validators.required])],
        password: ['', Validators.compose([Validators.required])],
        confirmPassword: ['', Validators.required],
    }, {validator: matchingPasswords('password', 'confirmPassword')});

matchingPasswords:

export function matchingPasswords(passwordKey: string, passwordConfirmationKey: string) {
return (group: FormGroup) => {
    let password = group.controls[passwordKey];
    let passwordConfirmation = group.controls[passwordConfirmationKey];
    if (password.value !== passwordConfirmation.value) {
        return passwordConfirmation.setErrors({mismatchedPasswords: true})
    }
}

}

HTML:

<div class="form-group">
        <input [formControl]="confirmPassword" class="form-control checking-field" type="password">
        <span class="help-block text-danger" *ngIf="form.get('password').touched && form.get('password').hasError('required')">
</div>
<div class="form-group">
        <input class="custom-control-input checkbox-main" type="checkbox" [(ngModel)]="policyButtonValue" [ngModelOptions]="{standalone: true}" ngDefaultControl>
        <span class="custom-control-indicator"></span>
</div>

这是功能性的,并且运行良好,但我有一个特殊的用例场景应该修复。

  1. 点击第一个密码字段。
  2. 填写密码,例如:&#34; foo&#34;
  3. 点击确认密码字段。
  4. tpye同样的事情,例如:&#34; foo&#34; enter image description here 直到这一刻,没有问题。
  5. 在确认密码字段中键入不同的内容,例如:&#34; foobar&#34; (此时,验证器显示此处存在错误) enter image description here
  6. 点击密码字段
  7. 输入密码字段中的相同内容:&#34; foobar&#34; 在这里,确认密码字段仍然无效,直到密码字段失去焦点... enter image description here 有没有办法,强制matchupPassword验证在keyup事件上运行,而不是现在如何运行?

1 个答案:

答案 0 :(得分:4)

您需要一个<tr> <td align="center" style="width: 1cm;"> <asp:Label ID="lblIndex" runat="server" Text='<%# Container.DataItemIndex + 1 %>' Font-Bold="true" />. <div <%# ((Container.DataItemIndex + 1) % 18 == 0) ? "class='page-break'": "" %>> </div> </td> </tr> <style type="text/css" media="print"> @page { size: auto; margin: 1cm; } .page-break { float:none; display: block; page-break-before: always; page-break-after: avoid; clear: both !important; } </style> 块:

else