Detaillierte Erläuterung der Formularüberprüfungsschritte in Angular4

Dieses Mal werde ich Ihnen die Schritte zur Formularüberprüfung in Angular4 ausführlich erläutern. Was sind die Vorsichtsmaßnahmen über Angular4 in Bezug auf die Formularüberprüfung?

In diesem Kapitel wird die Erstellung responsiver Formulare und die Überprüfung von Formulareingabewerten vorgestellt. Wir überspringen die Vorlagenformulare.

1. Schritte zur Verwendung responsiver Formulare

1. Fügen Sie ReactiveFormsModule
in das Modul ein (normalerweise app.module.ts). 2. Verwenden Sie responsive Formulare

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);
    }
  }
}

in der ts-Datei der Komponente 3. Verwenden Sie

<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>

auf der HTML-Seite der Komponente 2. Verwenden Sie Formulare, um Daten zu überprüfen

1. Angular verfügt über drei gängige Formularvalidierungen: erforderlich, minLength, maxLength
in Validatoren 2. Benutzerdefinierter Formularvalidator (eigentlich nur eine Funktion, Parameter der Funktion ist die aktuelle Zeile, die überprüft werden muss , und gibt ein beliebiges Objekt zurück)

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

3. In das Antwortformularfeld können drei Werte geschrieben werden. Der erste Parameter wird an die Seite zurückgegeben, der zweite Parameter ist der Validator (kann eine Gruppe sein) und der dritte Parameter ist die asynchrone Überprüfung (allgemeine Beurteilung des Mobiltelefons). Nummer, Benutzername wird wiederholt registriert)

3. Schritte zum Anpassen einer Verifizierungsmethode

1. Schreiben Sie eine separate Datei für den im Projekt benötigten Validator

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: '手机号码格式不正确' } };
}

2. Verwenden Sie Ihren eigenen definierten Validator

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: ['']
    })
  });
}

3. Definieren Sie die Verifizierung einer Verschlüsselungsgruppe

// 定义一个密码组的验证方法
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. Verwenden Sie

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})
  });
}

4. Bezüglich der Anzeige von Fehlern auf der Startseite

1. Seitenanzeigefehler

<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>

2. Stildateien definieren

.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;
}

5. Anzeigefehler der benutzerdefinierten Klasse

1. Schreiben Sie

in das Eingabefeld Zeigt an, dass das Feld ungültig ist und berührt wurde. Fügen Sie diese Klasse hinzu="error"

 [class.error]="myForm.get('username').invalid && myForm.get('username').touched"

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Bitte achten Sie darauf zu anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie das berechnete Attribut in Vue

Detaillierte Erläuterung der Verwendung von nativem Ajax get und Post-Methoden

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Formularüberprüfungsschritte in Angular4. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!