Question

我有来自plunker的以下代码，用于password和confirmPassword匹配验证。

import {Component} from '@angular/core';
import {Control, ControlGroup, FormBuilder, Validators,Validator} from '@angular/common';
import {CustomValidator} from './CustomValidator';

@Component({
    selector: 'register',
    templateUrl: './app/authentication/register_validation/register.html',
})

export class RegisterComponent{
    registrationForm: ControlGroup;
    password: Control;

    constructor(formBuilder:FormBuilder)
    { 
        this.registrationForm = formBuilder.group({
            email: ['',Validators.compose([Validators.required, CustomValidator.underscore])], 
            matchingPassword: formBuilder.group({
                password: ['',Validators.compose([Validators.required,CustomValidator.minPasswordLength])],
                confirmPassword: ['',Validators.required]
            }, {Validator:this.areEqual})
        });
    }

   areEqual(group: ControlGroup) {
    var valid = false;


    for (name in group.controls) 
    {
      if (val === undefined) 
      {
       var val = group.controls[name].value
      } 
      else 
      {
        if (val !== group.controls[name].value) 
        {
          valid = false;
          break;
        }
      }
    }

    if (valid) {
      return null;
    }

    return {
      areEqual: true
    };
}
}

以下是我的HTML模板：

<register>
    <form [ngFormModel] = "registrationForm">
        <div class = "form-group">
            <label class = "control-label" for="email">Email</label>
            <input class = "form-control" type="email" id="email" ngControl="email" #email="ngForm">
        </div>
        <div *ngIf = "email.touched && email.errors">
            <div *ngIf = "!email.errors.required && email.errors.underscoreNotFound" class = "alert alert-danger">
                <span>Underscore is required</span> 
            </div>
            <div *ngIf = "email.errors.required" class = "alert alert-danger">
                <span>Email is required</span>
            </div>
        </div>
        <div class = "form-group">
            <label class = "control-label" for="password">Password</label>
            <input class = "form-control" type="password" id="password" ngControl="password" #password="ngForm">
        </div>
        <div ng-control-group="matchingPassword">
            <div *ngIf = "password.touched && password.errors">
                <div *ngIf = "!password.errors.required && password.errors.passwordLengthIncorrect" class = "alert alert-danger">
                    <span>Password should contain 6 characters</span>
                </div>  
                <div *ngIf = "!password.errors.required && !password.errors.passwordLengthIncorrect && password.errors.pattern" class = "alert alert-danger">
                    <span>Password should have correct pattern</span>
                </div>
                <div *ngIf = "password.errors.required" class = "alert alert-danger">
                    <span>Password is required</span>
                </div>          
            </div>
            <div class = "form-group">
                <label class = "control-label" for="confirmPassword">Confirm Password</label>
                <input class = "form-control" type="password" id="confirmPassword" ngControl="confirmPassword" #confirmPassword="ngForm">
            </div>
            <div *ngIf = "confirmPassword.touched">
                <div *ngIf = "!confirmPassword.errors.areEqual" class = "alert alert-danger">
                    <span>Password and Confirm Password should be same</span>
                </div>  
    <!--            <div *ngIf = "confirmPassword.errors.required" class = "alert alert-danger">
                    <span>Password is required</span>
                </div>   -->
            </div>
        </div>
    </form>
</register>

但是这给了我错误：

browser_adapter.ts:78 ORIGINAL EXCEPTION：无法找到控件 '密码'

无法识别控制组matchingPassword中提供的密码。任何人都知道我为什么要面对这个问题？

Answer 1

您不能混合使用内联表单和显式表单（使用FormBuilder）。所以我会这样重构你的模板：

<input class = "form-control" type="password" id="password" 
       [ngFormControl]="registrationForm.controls.matchingPassword.controls.password">

并相应地更新表达式......

密码和ConfirmPassword验证在Angular 2

1 个答案: