将验证器中的字段与 angular2 进行比较

Question

我正在尝试在 Angular2 中创建一个具有 "repeat password" 功能的注册表单。我希望它能使用自定义验证器作为表单控件来工作。

我遇到的问题是，当验证器为运行时，"this-context" 似乎设置为验证器，因此我无法访问 RegistrationForm class 上的任何本地方法。而且我似乎找不到任何从验证器访问 ControlGroup 的好方法。

有人知道在自定义验证器中访问同一控件组中其他控件的好方法吗？

这是组件的简短示例：

import { Component, View } from 'angular2/angular2';
import { Validators, ControlGroup, Control, FORM_DIRECTIVES, FORM_BINDINGS } from 'angular2/angular2';

@Component({
    selector: 'form-registration'
})
@View({
    directives: [FORM_DIRECTIVES, ROUTER_DIRECTIVES],
    template: `
        <form (submit)="register($event)" [ng-form-model]="registerForm">
            <label for="password1">Password:</label>
            <input id="password1" ng-control="password1" type="password" placeholder="Passord" />

            <label for="password2">Repeat password:</label>
            <input id="password2" ng-control="password2" type="password" placeholder="Gjenta passord" />

            <button class="knapp-submit" type="submit" [disabled]="!registerForm.valid">Registrer deg</button>
        </form>
    `
})
export class RegistrationForm {
    registerForm: ControlGroup;

    constructor() {            
        this.registerForm = new ControlGroup({
            password1: new Control('', Validators.required),
            password2: new Control('', this.customValidator)
        });
    }

    public register(event: Event) {
        // submit form
    }

    private customValidator(control: Control) {
        // check if control is equal to the password1 control
        return {isEqual: control.value === this.registerForm.controls['password1'].value};
    }
}

Answer 1

所以我通过将 customValidator 绑定到我的 class 的 this-context 解决了这个问题，正如 Sergio 在评论中所解释的那样。

请记住，.bind(this) 函数 returns 具有绑定上下文的函数的新实例。

import { Component, View } from 'angular2/angular2';
import { Validators, ControlGroup, Control, FORM_DIRECTIVES, FORM_BINDINGS } from 'angular2/angular2';

@Component({
    selector: 'form-registration'
})
@View({
    directives: [FORM_DIRECTIVES, ROUTER_DIRECTIVES],
    template: `...my form template...`
})
export class RegistrationForm {
    registerForm: ControlGroup;

    constructor() {           
        this.customValidator = this.customValidator.bind(this); 
        this.registerForm = new ControlGroup({
            password1: new Control('', Validators.required),
            password2: new Control('', this.customValidator)
        });
    }

    public register(event: Event) {
        // submit form
    }

    private customValidator(control: Control) {
        // check if control is equal to the password1 control
        return {isEqual: control.value === this.registerForm.controls['password1'].value};
    }
}

Answer 2

尝试使用此代码进行验证。它工作成功!!!!

Register.component.html

<div class="signin-content">
    <mat-card>
      <mat-card-content>
        <form [formGroup]="userForm1" (ngSubmit)="onSubmit()">
          <p>Please Register Here</p>
          <mat-input-container class="full-width-input">
            <input matInput placeholder=" First Name" formControlName="firstname" >
          </mat-input-container>
          <mat-input-container class="full-width-input">
            <input matInput  placeholder="Last Name"   formControlName="lastname" >
          </mat-input-container>
          <mat-input-container class="full-width-input">
            <input matInput placeholder="Phone No."   formControlName="phone" required>
            <div *ngIf="userForm1.controls['phone'].hasError('pattern')" class="alert alert-danger" >
                please Enter 10 digits....
            </div>
          </mat-input-container>
          <mat-input-container class="full-width-input">
            <input matInput  placeholder="E-mail"   formControlName="email"  required>
            <span *ngIf="userForm1.hasError('email', 'email') && userForm1.get('email').touched" class="alert-danger">
                Please enter valid email contains '@','.' ...
              </span>
          </mat-input-container>
          <mat-input-container class="full-width-input">
            <input matInput type="password" placeholder="Password"   formControlName="password" required >
          </mat-input-container>
          <mat-input-container class="full-width-input">
            <input matInput type="password" placeholder="Confirm Password"   formControlName="cpassword" required>
            <div  *ngIf="userForm1.controls['cpassword'].errors?.MatchPassword && userForm1.get('cpassword').touched " class="alert alert-danger">
                Password not match
            </div>
          </mat-input-container>
          <button mat-raised-button [disabled]="!userForm1.valid" color="primary" type="submit">Register</button>

        </form>
      </mat-card-content>
    </mat-card>
  </div>

Register.component.ts

import { Component, OnInit, Output, EventEmitter, ViewChild } from '@angular/core';

import { MatGridListModule, MatButtonModule, MatInputModule, MatDialog,MatDialogRef } from '@angular/material';

import { FormGroup, FormBuilder,Validators } from '@angular/forms';

import {HttpClient} from '@angular/common/http';

import { Router } from '@angular/router'

import 'rxjs/add/operator/map';

import { Headers, Http, RequestOptions } from '@angular/http';

import { EqualTextValidator } from "angular2-text-equality-validator";

import { PasswordValidation } from './Passwordvalidation';

@Component({

  selector: 'app-registration',
  templateUrl: './registration.component.html',
  styleUrls: ['./registration.component.css']

})

export class RegistrationComponent implements OnInit {

  userForm1:FormGroup;
  password = 'password';

  constructor( private _formBuilder: FormBuilder,
    // public thisDialogref: MatDialogRef<AppComponent>  ,
    private http:HttpClient,
    private router: Router){}

  ngOnInit() {

    this.userForm1=this._formBuilder.group({

      id:[""],
      firstname:[""],
      lastname: [""],
      phone:[null,[Validators.required, Validators.pattern('^[1-9][0-9]{9}$'),Validators.maxLength(10)]],

      email:[null,[Validators.required,Validators.email]],
      password:["",[Validators.compose([Validators.required])]],
      cpassword:["",[Validators.required]],
      createdDate:[""],
      updatedDate:[""],
      status:[""]
    },{
      validator: PasswordValidation.MatchPassword // your validation method
    })
  }

  onSubmit(){
    console.log(this.userForm1.value);
    this.http.post("http://localhost:4001/user/signup",this.userForm1.value).subscribe(result => {
      console.log("register successful");
     });
     this.router.navigate(['/login']);
  }

}

Passwordvalidation.ts

从“@angular/forms”导入{AbstractControl}；导出 class 密码验证 {

static MatchPassword(AC: AbstractControl) {
   let password = AC.get('password').value; // to get value in input tag
   let cpassword = AC.get('cpassword').value; // to get value in input tag
    if(password != cpassword) {
        console.log('false');
        AC.get('cpassword').setErrors( {MatchPassword: true} )
    } else {
        console.log('true');
        return null
    }
}

}

将验证器中的字段与 angular2 进行比较

Comparing fields in validator with angular2

typescript

angular

Register.component.html

Register.component.ts

Passwordvalidation.ts