반응형 양식을 위한 사용자 정의 유효성 검사기

이번에는 Reactive Form의 Custom validator을 가져왔습니다. Reactive Form의 Custom Validator를 사용할 때 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

이 기사에서는 다음을 포함하여 Angular(Angular2+)의 Reactive Form 관련 콘텐츠를 소개합니다.

• Reactive Form 생성 방법

• 유효성 검사 사용 방법

• Custom 유효성 검사기

아래 텍스트 시작 !

Reactive Form 생성 방법

먼저 FormBuilder를 사용하여 다음과 같이 FormGroup을 생성해야 합니다.

registerForm: FormGroup;
constructor(
    private fb: FormBuilder,
) {}
ngOnInit() {
  this.registerForm = this.fb.group({
    firstName: [''],
    lastName: [''],
  })
}

위의 firstName 및 lastName은 직접 가져왔습니다. 각각 양식 컨트롤 이름입니다. firstName和lastName是由你自己取的，分别表示一个表单控件名称。
然后HTML页面就像这样：

<form [formGroup]="registerForm" (ngSubmit)="handleSubmit(registerForm)">
  <label>FirstName:</label>
  <input formControlName="firstName">
  <label>LastName:</label>
  <input formControlName="lastName">
  <button type="submit">Submit</button>
</form>

这样就创建了一个非常简单的表单！

如何使用验证

表单的输入项经常是要进行验证的，那该怎么验证呢？
其实很简单，Angular已经为我们写好了一些常用的验证器，就像这样使用就可以了：

ngOnInit() {
  this.registerForm = this.fb.group({
    firstName: ['', Validators.required],
    lastName: ['', Validators.pattern('[A-Za-z0-9]*')],
  })
}

可以使用“必要”验证器，也可以使用正则，你只需传入一个正则表达式就可以了。除此之外，还有minLength和maxLength等。
如果一个控件需要多个验证器，可以把它们放在一个数组里面：

lastName: ['', [Validators.pattern('[A-Za-z0-9]*'), Validators.required]]

如果你希望在输入时得到一些提示，可以这样写你的HTML：

<form [formGroup]="registerForm" (ngSubmit)="handleSubmit(registerForm)">
  <label>FirstName:</label>
  <input formControlName="firstName">
  <p *ngIf="registerForm.controls.firstName.touched && registerForm.controls.firstName.invalid">
    This field is required!
  </p>
  <label>LastName:</label>
  <input formControlName="lastName">
  <p *ngIf="registerForm.controls.lastName.hasError(&#39;pattern&#39;)">
    Invalid input!
  </p>
  <button type="submit" [disabled]="!registerForm.valid">Submit</button>
</form>

第一个控件，在你“touch”过又为空的情况下会给出提示；第二个控件，在输入不符合正则表达式规则的情况下给出提示，hasError方法还可以传入required、minLength等参数，分别对应不同的验证器；最后，在输入还未符合规则的时候，Submit按钮是处于禁用状态的。

Angular提供的几个验证器在实际项目中往往是不够用的，因此我们需要自定义验证器，以满足我们的业务需求！

自定义验证器

验证器其实就是一个有着return그러면 HTML 페이지는 다음과 같습니다:

export function validateUrl(control: AbstractControl){
  if(control.value){
    if(!control.value.startsWith('www') || !control.value.includes('.io')){
      return {
        inValidUrl: true
      }
    }
  }
  return null;
}

이렇게 하면 매우 간단한 양식이 생성됩니다!

인증 사용법

양식의 입력 항목은 종종 인증이 필요한데 어떻게 인증하나요?

실제로는 매우 간단합니다. Angular는 이미 다음과 같이 사용할 수 있습니다.

this.registerForm = this.fb.group({
    firstName: ['', Validators.required],
    lastName: ['', [Validators.pattern('[A-Za-z0-9]*'), Validators.required]],
    website: ['', validateUrl], // <---
})

"필요한" 유효성 검사기나 정규식을 사용하면 됩니다. 정규식

을 사용하면 됩니다. 그 밖에도 minLength, maxLength 등이 있습니다.

컨트롤에 여러 유효성 검사기가 필요한 경우 배열에 배치할 수 있습니다.

<label>Website:</label>
  <input formControlName="website">
    <p *ngIf="registerForm.controls.website.invalid">
    Url must starts with www and includes .io
  </p>

입력할 때 몇 가지 프롬프트를 표시하려면 다음과 같이 HTML을 작성할 수 있습니다. rrreee첫 번째 컨트롤은 "터치"하고 비어 있습니다. 입력이 정규식 규칙을 준수하지 않는 경우 두 번째 컨트롤은 메시지를 표시합니다. hasError 메소드는 필수 및 minLength는 각각 다른 유효성 검사기에 해당합니다. 마지막으로 입력이 규칙을 준수하지 않으면 제출 버튼이 비활성화됩니다.

Angular에서 제공하는 여러 유효성 검사기는 실제 프로젝트에서 충분하지 않은 경우가 많으므로 비즈니스 요구 사항에 맞게 유효성 검사기를 사용자 정의해야 합니다!

사용자 정의 유효성 검사기
유효성 검사기는 실제로 return이 있는 메서드입니다!

이제 URL 입력 상자의 값이 규칙을 준수하는지 확인하는 유효성 검사기를 작성해 보겠습니다. 🎜rrreee🎜입력 값이 "www"로 시작하고 ".io"를 포함하는지 테스트합니다. 그런 다음 Angular에서 제공하는 유효성 검사기와 동일한 방법을 사용합니다. 🎜rrreee🎜 그런 다음 적절한 경우 프롬프트를 얻을 수 있도록 다음과 같이 HTML을 작성할 수 있습니다. 🎜rrreee🎜자, 오늘은 여기까지입니다. 🎜🎜이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 🎜🎜추천 자료: 🎜🎜🎜JavaScript DOM 최적화🎜🎜🎜🎜🎜WeChat 애플릿에서 양방향 데이터 바인딩을 구현하는 방법🎜🎜🎜

위 내용은 반응형 양식을 위한 사용자 정의 유효성 검사기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!