템플릿 기반 양식의 사용자 정의 유효성 검사 기능을 구현하기 위해 Angular를 작동하는 방법

이번에는 Angular를 사용하여 템플릿 기반 양식의 사용자 정의 검증 기능을 구현하는 방법을 보여드리겠습니다. 다음은 실제 사례를 살펴보겠습니다. HTML5의 기본 양식 확인 속성(필수, 길이 제한, 값 간격,

정규 표현식

등)은 일반적인 확인 요구를 충족할 수 있지만 비밀번호 확인, 시간/값 등록 시와 같은 일부 시나리오에서는 사용자 지정 확인을 사용해야 합니다. 비교 관계가 있는 선택, 값 확인을 위해 서버에 요청해야 하는 경우 등... 여기서는 비밀번호 확인을 예로 들어 보겠습니다.

Command Development　formControl의 오류 속성을 통해 양식의 확인 상태가 피드백되므로 기본 아이디어는 확인 규칙을 추가한 다음 확인 결과를 formControl 인스턴스의 오류 속성에 추가하는 것입니다. . 그러면 문제가 발생합니다. 템플릿 기반 양식의 제어가 HTML 템플릿에서 완료되고 formControl 인스턴스에 직접 액세스할 수 없습니다. 이때 지침을 사용하여 검사 규칙을 패키지화해야 합니다. Angular는 양식 사용자 정의 유효성 검사를 처리하기 위해

validator

provider NG_VALIDATORS를 제공합니다. 먼저 지시문을 작성하십시오.

import { Directive} from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl} from '@angular/forms';
@Directive({
 selector: '[appConfirmpsw]',
 providers: [{
  provide : NG_VALIDATORS,
  useExisting : ConfirmpswDirective,
  multi: true
 }]
})
export class ConfirmpswDirective implements Validator {
 constructor() {
  }
 validate(control: AbstractControl): {[key: string]: any} {
   //检验规则
 }
}

　1. NG_VALIDATORS 명령에 대한 공급자를 지정하고 별칭 클래스인ConfirmpswDirective를 지정하며 multi는 true입니다(동일한 토큰을 사용하여 다른 공급자를 등록할 수 있습니다). NG_VALIDATORS Provider에 등록된 지시문이므로 Angular의 검증 과정에서 인식할 수 있으므로 새로운 인스턴스가 생성되지 않도록 useExisting에 등록해야 한다는 점에 유의해야 한다.

　2. Validator 인터페이스를 사용하여 사용자 정의 지침을 제한합니다. 이것은 Angular에서 제공하는 유효성 검사기 클래스입니다. 양식의 formControl을 전달하고 ValidationErrors 객체를 반환하는 유효성 검사 속성이 있습니다.

이제 명령 구조가 완료되었으므로 검증 부분이 시작됩니다. 먼저 입력한 비밀번호를 전달해야 하므로 @input을 추가한 후 바인딩된 폼의 값이 입력한 값과 동일한지 확인하는 확인 규칙을 지정해야 합니다. 추가로 확인psw를 전달합니다. 속성( <input type="password" appConfirmpsw [confirmpsw]="'xxx'" >)이므로 명령 이름 appConfirmpsw를 확인psw의 별칭으로 사용합니다. <input type="password" [appConfirmpsw] = "'xxx'">에 대한 값을 전달하는 것이 더 편리하고 단순화될 것입니다.

　여기에는 값을 비교하고 결과를 반환하는 테스트 함수가 특별히 작성되었습니다. 명령 유효성 검사에서

@Input('appConfirmpsw') confirmpsw: string;

를 호출해야 합니다. 전체 명령은 다음과 같습니다. <input type="password" appConfirmpsw [confirmpsw]="&#39;xxx&#39;" >)，所以我们将 指令名称appConfirmpsw作为confirmpsw的别名，这样传值会比较方便，简化为  <input type="password" [appConfirmpsw] = "&#39;xxx&#39;">。

　　这里专门写一个检验函数，用来比对值和返回结果。记得在指令的validate中调用一下

export function comfirmPswValidator(_confirmpsw: string): ValidatorFn { //传入已输入的密码值 ， 返回一个ValidatorFn
 return (control: AbstractControl): {[key: string]: any} => { //传入绑定表单的formControl
  if ( !control.value ) { //如果绑定未输入值，则返回 required错误
   return { 'required' : true };
  }
　　//如果两次输入的值不相同，则返回confirmpsw的错误
  return control.value !== _confirmpsw ? {'confirmpsw' : {value: true}} : null;
 };
}

　　完整指令如下：

import { Directive, Input } from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl, ValidatorFn} from '@angular/forms';
@Directive({
 selector: '[appConfirmpsw]',
 providers: [{
  provide : NG_VALIDATORS,
  useExisting : ConfirmpswDirective,
  multi: true
 }]
})
export class ConfirmpswDirective implements Validator {
 @Input('appConfirmpsw') confirmpsw: string;
 constructor() {
  }
 validate(control: AbstractControl): {[key: string]: any} {
  console.log(this.confirmpsw);
  return this.confirmpsw ? comfirmPswValidator(this.confirmpsw)(control) : null;
 }
}
export function comfirmPswValidator(_confirmpsw: string): ValidatorFn {
 return (control: AbstractControl): {[key: string]: any} => {
  if ( !control.value ) {
   return { 'required' : true };
  }
  return control.value !== _confirmpsw ? {'confirmpsw' : {value: true}} : null;
 };
}

　使用

　　测试一下指令的效果吧

 <p class="input-group">
   <label class="group-label" for="psw-new"> 新密码 ：</label>
   <input class="group-input" [(ngModel)]="inputpsw.new" #new="ngModel" type="password" name="psw" id="psw-new" required>
  </p>
  <p class="input-group input-error" *ngIf="new.touched&&new.invalid">
   <p class="group-error-content" *ngIf="new.errors?.required">确认密码为必填项！</p>
  </p>
  <p class="input-group">
   <label class="group-label" for="psw-confirm">确认密码 ：</label>
   <input class="group-input" [(ngModel)]="inputpsw.confirm" #confirm="ngModel" type="password" name="confirm" id="psw-confirm"
   [appConfirmpsw] = "new.value" required>
  </p>
  <p class="input-group input-error" *ngIf="confirm.touched&&confirm.invalid">
   <p class="group-error-content" *ngIf="confirm.errors?.required">新密码为必填项！</p>
   <p class="group-error-content" *ngIf="confirm.errors?.confirmpsw">密码输入不一致！</p>
  </p>

　　传入new表单的值，并通过errors.confirmpswrrreee

를 사용하여 명령의 효과를 테스트합니다. rrreee

새 형식의 값을 전달하고 전달합니다. 프롬프트 피드백을 제어하는 ​​errors.confirmpsw 속성입니다. 비밀번호 입력이 일치하지 않으면 올바르게 인증할 수 있습니다<p></p> <p></p> <p> 비밀번호가 비어 있는지 확인하는 프롬프트도 정확합니다<a href="http://www.php.cn/js-tutorial-398886.html" target="_blank"></a><br></p> <p>이 기사의 사례를 읽으신 후 방법을 익히셨을 것입니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트 기사에서 다른 관련 주제에 주목하세요! <a href="http://www.php.cn/js-tutorial-398885.html" target="_blank"></a>추천 도서: <br></p>🎜bison으로 인한 Mac 설치 절약 오류 처리 방법🎜🎜🎜🎜🎜Taobao 미러 cnpm을 사용하여 Vue.js를 설치하는 방법🎜🎜🎜

위 내용은 템플릿 기반 양식의 사용자 정의 유효성 검사 기능을 구현하기 위해 Angular를 작동하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!