Heim  >  Artikel  >  Web-Frontend  >  Methode zur Überprüfung der Winkelform

Methode zur Überprüfung der Winkelform

一个新手
一个新手Original
2017-10-17 10:26:021905Durchsuche

Vorlage

<form id="login-form" class="login-from" #registerForm="ngForm" (ngSubmit)="doSubmit(registerForm.value)">
        <mat-form-field>
          <input matInput placeholder="邮箱" id="email" name="email" [(ngModel)]="formData.email" required pattern="[\w]+?@[\w]+?\.[a-z]+?">
          <mat-error *ngIf="formErrors.email">{{ formErrors.email }}</mat-error>
        </mat-form-field>

        <fieldset ngModelGroup="passwordGroup" #passwordGroup="ngModelGroup" aria-required="true">
          <mat-form-field>
            <input matInput placeholder="密码" type="password" id="password" name="password" [(ngModel)]="formData.password" #password="ngModel"  required minlength="8">
            <!-- <mat-icon matSuffix (click)="hide = !hide">{{hide ? &#39;visibility&#39; : &#39;visibility_off&#39;}}</mat-icon> -->
          </mat-form-field>

          <mat-form-field>
            <!--使用自定义的校验器,加入repeatPassword指令,传入第一个密码输入框的ngModel,即用#password1="ngModel"声明的password1-->
            <input matInput placeholder="确认密码" type="password" id="passwordConfirm" name="passwordConfirm" [(ngModel)]="formData.passwordConfirm" [repeatPassword]="password" >
            <!-- <mat-icon matSuffix (click)="hide = !hide">{{hide ? &#39;visibility&#39; : &#39;visibility_off&#39;}}</mat-icon> -->
            <mat-error *ngIf="formErrors[&#39;passwordGroup.passwordConfirm&#39;]">{{ formErrors[&#39;passwordGroup.passwordConfirm&#39;] }}</mat-error>
          </mat-form-field>
        </fieldset>

        <button class="w-100p" mat-raised-button [disabled] = "!registerForm.valid" >注册</button>
      </form>

Komponente

import { Component, OnInit ,ViewChild, AfterViewInit } from &#39;@angular/core&#39;;import {NgForm} from "@angular/forms";import { Router } from &#39;@angular/router&#39;;@Component({
  selector: &#39;app-register&#39;,
  templateUrl: &#39;./register.component.html&#39;,
  styleUrls: [&#39;./register.component.css&#39;]
})
export class RegisterComponent implements OnInit {

  ngAfterViewInit(): void {    //订阅表单值改变事件
    this.registerForm.valueChanges.subscribe(data => this.onValueChanged(data));
  }  //找到表单
  @ViewChild(&#39;registerForm&#39;) registerForm: NgForm;

  formData = {} as any;

  doSubmit(obj: any) {    //表单提交
    console.log(JSON.stringify(obj));
  }

  onValueChanged(data) {    
  for (const field in this.formErrors) {      
  this.formErrors[field] = &#39;&#39;;      //取到表单字段
      const control = this.registerForm.form.get(field);      //表单字段已修改或无效
      if (control && control.dirty && !control.valid) {        //取出对应字段可能的错误信息
        const messages = this.validationMessages[field];        //从errors里取出错误类型,再拼上该错误对应的信息
        for (const key in control.errors) {          this.formErrors[field] += messages[key] + &#39;&#39;;
        }
      }

    }

  }  //存储错误信息
  formErrors = {    &#39;email&#39;: &#39;&#39;,    &#39;passwordGroup.password&#39;:&#39;&#39;,    &#39;passwordGroup.passwordConfirm&#39;:&#39;&#39;
  };  //错误对应的提示
  validationMessages = {    &#39;email&#39;: {      &#39;required&#39;: &#39;邮箱必须填写.&#39;,      &#39;pattern&#39;: &#39;邮箱格式不对&#39;,
    },    &#39;passwordGroup.password&#39;:{      &#39;required&#39;: &#39;请输入密码&#39;,      &#39;minlength&#39;: &#39;密码太短&#39;,
    },    &#39;passwordGroup.passwordConfirm&#39;:{      &#39;required&#39;: &#39;请重复输入密码&#39;,      &#39;minlength&#39;: &#39;密码太短&#39;,      &#39;passwordNEQ&#39;:&#39;两次输入密码不同&#39;,      &#39;passwordInValid&#39;:&#39;&#39;
    },

  };

  constructor(private router : Router) { }

  ngOnInit() {
  }

  gotoLogin(){    this.router.navigate([&#39;user/login&#39;]);
  }

  recoverPwd(){    this.router.navigate([&#39;/user/recover/pwd&#39;]);
  }
}

Benutzerdefinierter Validator: Wiederholungspasswort

import {Directive, Input, OnChanges, SimpleChanges} from &#39;@angular/core&#39;;import {NG_VALIDATORS, FormControl, Validator, AbstractControl, ValidatorFn, NgModel} from "@angular/forms";@Directive({
  selector: &#39;[repeatPassword]&#39;,
  providers: [{provide: NG_VALIDATORS, useExisting: RepeatPasswordDirective, multi: true}]
})
export class RepeatPasswordDirective implements Validator,OnChanges {

  /**
   * 校验方法
   * @param c
   * @returns {{[p: string]: any}}
   */
  validate(c: AbstractControl): {[p: string]: any} {    
  return verifyPassword(c,this.repeatPassword.control);
  }

  ngOnChanges(changes: SimpleChanges): void {      
  this.repeatPassword=changes[&#39;repeatPassword&#39;].currentValue;
  }  /**
   * 通过属性传入另一个input标签的model
   * 名称与选择器一致,就不需要在使用的时候加额外的属性传入
   */
  @Input() repeatPassword:NgModel;

  constructor() { }


}/**
 * 导出校验方法,供响应式表单使用
 * @param passwordController
 * @returns {(currentControl:AbstractControl)=>{[p: string]: any}}
 */export function repeatPassword(passwordController:FormControl):ValidatorFn {  return (currentControl: AbstractControl): {[key: string]: any} => {    return verifyPassword(currentControl,passwordController);
  };
}

function verifyPassword(currentControl: AbstractControl,passwordController:FormControl):{[key: string]: any} {    if(!passwordController.valid) {
      console.log("密码1无效");      return {passwordInValid:{&#39;errorMsg&#39;:&#39;&#39;}}
    }    if((!currentControl.untouched||currentControl.dirty)&&passwordController.value!=currentControl.value) {      return {passwordNEQ:{&#39;errorMsg&#39;:&#39;两次密码输入不一致!&#39;}}
    }
}

Hinweis:
Methode zur Überprüfung der Winkelform

Der obige Fehler tritt auf, weil Sie beim Erstellen des Befehls Folgendes verwenden: ng g-Anweisung „repeatPassword“
, der automatisch das Präfix „app“ hinzufügt

@Directive({  
selector: &#39;[appRepeatPassword]&#39;,  
providers: [{provide: NG_VALIDATORS, 
useExisting: RepeatPasswordDirective,
multi: true}]
})

und es in „repeatPassword“
Methode zur Überprüfung der Winkelform ändert

Der obige Fehler tritt auf, weil

<input matInput placeholder="密码" type="password" id="password" name="password" [(ngModel)]="formData.password" #password1="ngModel"  required minlength="8">
使用的字段是password,(不知道怎么描述)却是#password1。

in #password

geändert werden kann

Das obige ist der detaillierte Inhalt vonMethode zur Überprüfung der Winkelform. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn