Angle4의 양식 확인 단계에 대한 자세한 설명

이번에는 Angular4의 폼 검증 단계에 대해 자세히 설명하겠습니다. Angular4의 Notes에는 어떤 것이 있나요? 실제 사례를 살펴보겠습니다.

이 장에서는 반응형 양식 생성 및 양식 입력 값 확인에 대해 소개합니다. 템플릿 양식을 건너뜁니다.

1. 반응형 양식을 사용하는 단계

1. 모듈(보통 app.module.ts)에 ReactiveFormsModule을 도입하세요
2. 컴포넌트의 ts 파일에서 반응형 폼을 사용하세요

import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
export class ReactiveFormComponent implements OnInit {
  private myForm: FormGroup;
  constructor(private fb: FormBuilder) {
    this.createForm();
  }
  ngOnInit() {
  }
  // 创建表单元素
  createForm() {
    this.myForm = this.fb.group({
      username: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(6)]],
      mobile: ['', [Validators.required]],
      password: this.fb.group({
        pass1: [''],
        pass2: ['']
      })
    });
  }
  // 提交表单函数
  postDate() {
    /**
     * valid:是否有效
     * invalid:无效
     * dirty:脏
     * status:状态
     * errors:显示错误
     */
    if(this.myForm.valid){
      console.log(this.myForm.value);
    }
  }
}

3. 구성 요소의 HTML 페이지에서

<form [formGroup]="myForm" (ngSubmit)="postDate()">
  <p class="form-group">
    <label for="username">用户名:</label>
    <input type="text" placeholder="请输入用户名" class="form-control" id="username" formControlName="username" />
  </p>
  <p class="form-group">
    <label for="mobile">手机号码:</label>
    <input type="text" placeholder="请输入手机号码" class="form-control" id="mobile" formControlName="mobile"/>
  </p>
  <p formGroupName="password" style="border:none;">
    <p class="form-group">
      <label>密码:</label>
      <input type="password" class="form-control" placeholder="请输入密码" formControlName="pass1" />
    </p>
    <p class="form-group">
      <label>确认密码:</label>
      <input type="password" class="form-control" placeholder="请再次输入密码" formControlName="pass2" />
    </p>
  </p>
  <p class="form-group">
    <input type="submit" value="提交" class="btn btn-warning" [disabled]="!myForm.valid" />
  </p>
</form>

를 사용하세요. 2. 양식을 사용하여 데이터를 확인하세요

1. Angular에는 세 가지 일반적인 형식 확인이 제공됩니다: 유효성 검사기의 필수, minLength, maxLength
2. 사용자 정의 형식 유효성 검사기(실제로는 함수일 뿐이며 function의 매개 변수는 현재 확인해야 하는 행이며 임의의 개체를 반환합니다)

rreee

3. 반응형 폼 필드에는 세 가지 값을 작성할 수 있으며, 첫 번째는 페이지로 반환되며, 두 번째 매개변수는 유효성 검사기(그룹일 수 있음), 세 번째 매개변수는 비동기 검증(휴대폰의 공통 판단)입니다. 번호, 사용자 이름이 반복적으로 등록됩니다)

3. 인증 방법을 맞춤설정하는 단계

1. 프로젝트에 필요한 검증인용 파일을 별도로 작성합니다

**格式**
export function fnName(control:FormControl|FormGroup):any{
}

2. 자신이 정의한 유효성 검사기를 사용하세요

import { FormControl, FormGroup } from '@angular/forms';
/**
 * 自定义验证器(其实就是一个函数,一个返回任意对象的函数)
 * 传递的参数是当前需要验证的表单的FormControl
 * 通过传递的参数获取当前表单输入的值
 */
export function mobileValidator(control: FormControl): any {
  console.dir(control);
  // 获取到输入框的值
  const val = control.value;
  // 手机号码正则
  const mobieReg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
  const result = mobieReg.test(val);
  return result ? null : { mobile: { info: '手机号码格式不正确' } };
}

3. 암호 그룹 검증 정의

createForm() {
  this.myForm = this.fb.group({
    username: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(6)]],
    mobile: ['', [Validators.required, mobileValidator]],
    password: this.fb.group({
      pass1: [''],
      pass2: ['']
    })
  });
}

4.

// 定义一个密码组的验证方法
export function passValidator(controlGroup: FormGroup): any {
  // 获取密码输入框的值
  const pass1 = controlGroup.get('pass1').value as FormControl;
  const pass2 = controlGroup.get('pass2').value as FormControl;
  console.log('你输入的值:', pass1, pass2);
  const isEqule: boolean = (pass1 === pass2);
  return isEqule ? null : { passValidator: { info: '两次密码不一致' } };
}

를 사용하세요. 4. 프론트엔드 페이지 오류 표시 관련

1. 페이지 표시 오류

createForm() {
  this.myForm = this.fb.group({
    username: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(6)]],
    mobile: ['', [Validators.required, mobileValidator]],
    password: this.fb.group({
      pass1: [''],
      pass2: ['']
    }, {validator: passValidator})
  });
}

2. 스타일 파일 정의

<p class="form-group">
  <label for="username">用户名:</label>
  <input type="text" placeholder="请输入用户名" class="form-control" id="username" formControlName="username" />
  <!-- 当输入框没有访问的时候或者合法的时候不显示 -->
  <p [hidden]="myForm.get(&#39;username&#39;).valid || myForm.get(&#39;username&#39;).untouched">
    <p [hidden]="!myForm.hasError(&#39;required&#39;,&#39;username&#39;)">用户名必填的</p>
    <p [hidden]="!myForm.hasError(&#39;minlength&#39;,&#39;username&#39;)">用户名长度过短</p>
    <p [hidden]="!myForm.hasError(&#39;maxlength&#39;,&#39;username&#39;)">用户名长度太长</p>
  </p>
</p>
<p class="form-group">
  <label for="mobile">手机号码:</label>
  <input type="text" placeholder="请输入手机号码" class="form-control" id="mobile" formControlName="mobile"/>
  <p [hidden]="myForm.get(&#39;mobile&#39;).valid || myForm.get(&#39;mobile&#39;).untouched">
    <p [hidden]="!myForm.hasError(&#39;mobile&#39;, &#39;mobile&#39;)">{{myForm.getError('mobile', 'mobile')?.info}}</p>
  </p>
</p>
<p formGroupName="password" style="border:none;">
  <p class="form-group">
    <label>密码:</label>
    <input type="password" class="form-control" placeholder="请输入密码" formControlName="pass1" />
  </p>
  <p class="form-group">
    <label>确认密码:</label>
    <input type="password" class="form-control" placeholder="请再次输入密码" formControlName="pass2" />
  </p>
  <!-- 对于group可以不在外面加一层判断 -->
  <p>
    <p [hidden]="!myForm.hasError(&#39;passValidator&#39;,&#39;password&#39;)">
      {{myForm.getError('passValidator','password')?.info}}
    </p>
  </p>
</p>

5. 맞춤 클래스 표시 오류

1. 입력란에

라고 입력하세요. 이는 해당 필드가 유효하지 않으며 터치되었음을 의미합니다. 이 class="error"

.ng-touched:not(form),.ng-invalid:not(form) {
  border: 1px solid #f00;
}
.ng-valid:not(form),.ng-untouched:not(form) {
  border: 1px solid #ddd;
}
p{
  color:#f00;
}

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 다음 페이지의 다른 관련 기사를 주목하세요. PHP 중국어 웹사이트!

추천 자료:

Vue에서 계산된 속성을 사용하는 방법

네이티브 Ajax get 및 post 메소드 사용에 대한 자세한 설명

위 내용은 Angle4의 양식 확인 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!