Tauchen Sie tief in die Formen in Angular ein

Dieser Artikel gibt Ihnen eine detaillierte Einführung in die Formulare in Angular. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Winkelform

---

Was ist ein Vorlagenformular?

Das Datenmodell des Formulars wird durch entsprechende Anweisungen in der Komponentenvorlage definiert, da das Datenmodell des Formulars in definiert ist Auf diese Weise sind wir derzeit durch die HTML-Syntax eingeschränkt, sodass der vorlagengesteuerte Ansatz nur für einige einfache Szenarien geeignet ist.

Was sind reaktive Formulare?

Reaktive Formulare bieten eine modellgesteuerte Möglichkeit, Formulareingaben zu verarbeiten, bei denen sich Werte im Laufe der Zeit ändern. Wenn Sie reaktive Formulare verwenden, erstellen Sie ein zugrunde liegendes Datenmodell, indem Sie TypeScript-Code anstelle von HTML-Code schreiben. Nachdem das Modell definiert ist, verwenden Sie einige spezifische Anweisungen, um die HTML-Elemente in der Vorlage mit dem zugrunde liegenden Datenmodell zu verbinden.
Hinweis:

• Das Datenmodell ist kein beliebiges Objekt, es besteht aus einigen spezifischen Klassen im Angular/Forms-Modul, wie z. B. FormControl, FormGroup, FormArray usw. In Vorlagenformularen kann nicht direkt auf diese Klassen zugegriffen werden. [Verwandte Empfehlung: „angular Tutorial“]

• Responsive Formulare generieren kein HTML für Sie, die Vorlage muss noch von Ihnen selbst geschrieben werden.

• Im Vorlagenformular können Sie nicht auf die zugehörigen Klassen des Datenmodells zugreifen, und Sie können nur auf die endgültigen Daten des Formulars zugreifen. Sie können auf die Klassen zugreifen, die sich auf das Datenmodell beziehen Sie sind nicht referenzierbar und können daher nicht in Vorlagen, sondern nur in TypeScript-Code ausgeführt werden.

Responsives Formular

FormGroup

FormGroup kann entweder einen Teil des Formulars oder das gesamte Formular darstellen. Es handelt sich um eine Sammlung mehrerer FormControls. FormGroup fasst die Werte und den Status mehrerer FormControl zusammen. Wenn während der Formularvalidierung ein FormControl in der FormGroup ungültig ist, ist die gesamte FormGroup ungültig.

FormControl

FormControl ist die Grundeinheit eines Formulars. Es wird normalerweise zur Darstellung eines Eingabeelements verwendet, kann aber auch zur Darstellung einer komplexeren Komponente wie eines Kalenders oder eines Dropdown-Auswahlfelds verwendet werden . FormControl speichert den aktuellen Wert des damit verbundenen HTML-Elements, den Validierungsstatus des Elements und Informationen, z. B. ob das Element geändert wurde.

FormArray

FormArray ähnelt FormGroup, verfügt jedoch über eine Längeneigenschaft. Im Allgemeinen wird FormGroup zur Darstellung des gesamten Formulars oder einer festen Teilmenge von Formularfeldern verwendet; FormArray wird normalerweise zur Darstellung einer Reihe von Feldern verwendet, die wachsen können.

Formularvalidierung

Angular integrierte Validatoren

Angular stellt uns mehrere integrierte Validatoren zur Verfügung:

• Validators.required – Der Formularkontrollwert ist nicht leer
• Validators.email – Das Format des Formularkontrollwerts ist email
• Validators.minLength() – Die minimale Länge des Formularkontrollwerts
• Validators.maxLength() – Die maximale Länge des Formularkontrollwerts
• Validators .pattern() – Der Wert des Formularsteuerelements muss mit dem Muster (regulären Ausdruck) übereinstimmen, das dem Muster entspricht Einige Validatoren müssen angepasst werden. Im Allgemeinen kann die Überprüfungsfunktion in der folgenden Form definiert werden:

xxxxValidator(control: AbstarctControl): {[key: string]: any} {    
      // TODO 编写校验规则   
      return null;  
 }

Im Folgenden wird eine allgemeine Registrierungsseite als Beispiel verwendet:

Initialisierungsformular

ngOnInit(): void {  
     this.formModel = this.fb.group({    
	username: ['', [Validators.required, Validators.minLength(6)]],    
	// 密码    
	passwordsGroup: this.fb.group({     
	       password: [''],  
	       passwordConfirm: [''] 
	       }, { validator: this.equalValidator }),    
        // 手机号    
        mobile: ['', this.moblieValidator]  });
 }

Einen Validator schreiben

// 手机号码校验
moblieValidator(control: AbstractControl): any {  
   const reg = /^((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8}$/;  
   const valid = reg.test(control.value);  
   console.log('mobile的校验结果：', valid); 
   return valid ? null : { mobile: true };
}

// 密码校验
equalValidator(group: FormGroup): any {  
   const password = group.get('password') as FormControl;  
   const passwordConfirm = group.get('passwordConfirm') as FormControl;  
   const valid = password.value === passwordConfirm.value;  
   console.log('密码校验结果', valid);  
   return valid ? null : { equal: true };
}

Angularer asynchroner Validator

Angulars Formular-API unterstützt auch asynchrone Validatoren, die Remote-Dienste aufrufen können, um die Werte von Formularfeldern zu überprüfen. Der asynchrone Validator ähnelt dem gewöhnlichen Validator und ist ebenfalls eine Methode. Der einzige Unterschied besteht darin, dass der asynchrone Validator kein Objekt, sondern einen beobachtbaren Stream zurückgibt.

moblieAsyncValidator(control: AbstractControl): Observable<any> {  
   const reg = /^((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8}$/;  
   const valid = reg.test(control.value);  
   console.log(&#39;mobile的校验结果：&#39;, valid); 
   return of(valid ? null : { mobile: true }); 
 }

Angular-Statusfelder

touched und untouched

• geben an, ob der Benutzer auf das Feld zugegriffen hat, d. h. ob das Feld den Fokus erhalten hat. Wird im Allgemeinen verwendet, um zu bestimmen, ob Formularfehlermeldungen angezeigt werden. Wenn gleichzeitig ein Feld berührt wird, ist das berührte Attribut des gesamten Formulars nur wahr, wenn alle Felder unberührt sind, ist das unberührte Attribut des gesamten Formulars wahr.
  • pristine 和 dirty

  如果一个字段的值从来没有改变过， 那么它的 pristine 就是 true， dirty 就是 false； 反之， 如果字段的值被修改过， 那么它的pristine 就是 false， dirty 就是 true。 同时， 如果任何一个字段是 dirty， 那么整个表单的 dirty 属性就是 true； 只有所有字段是 pristine 时， 整个表单的 pristine 属性才是 true。

  • pending

  当一个字段处于异步校验时， 该字段的 pending 属性是 true。

  自定义模板式表单的校验器

  在Tauchen Sie tief in die Formen in Angular ein里， 我们后台有一个编码的数据模型， 只需要将校验器的方法挂在指定字段属性上就可以了。 但是， 在模板式表单里， 后台是没有这类数据模型的， 指令才是唯一能用的东西， 所以我们需要将校验方法包装成指令， 然后才能在模板中使用它。

  编写指令

  @Directive({  
     selector: '[mobile]', 
      providers: [{provide: NG_VALIDATORS, useValue: moblieValidator, multi: true}]})
   export class MobileValidatorDirective {  
      constructor() { }
   }
   
  // html中引用
  <div>  手机号:<input ngModel type="number" name="mobile" mobile required></div>

  mutli: true ：指的是在 NG_VALIDATORS 这个 Token 下可以挂不同 useValue 属性所表示的值。

  注意: 在模板式表单中， 是不可以在模板中使用字段的状态属性的。 模板式表单与Tauchen Sie tief in die Formen in Angular ein不同， 它的模型的值和它状态的变更是异步的， 而且很难控制。
  如果想要使用字段的状态属性，我们可以进行如下操作：

  // .html文件中
  <div>  
     用户名:<input ngModel type="text" minlength="6" name="username" (input)="onUsernameInput(myForm)" required>
  </div>
  <div [hidden]="usernameValid || usernameUntouched">  
      <div [hidden]="!myForm.form.hasError(&#39;required&#39;, &#39;username&#39;)">
        用户名是必填项！
      </div>  
      <div [hidden]="!myForm.form.hasError(&#39;minlength&#39;, &#39;username&#39;)">
        用户名长度至少是6位！
      </div>
  </div>
  // .ts文件中
  usernameValid = true; 
  usernameUntouched = true; 
  onUsernameInput(form: NgForm): void {  
     if (form) {
        this.usernameValid = form.form.get(&#39;username&#39;).valid;    
        console.log(&#39;valid&#39;, this.usernameValid);          
        this.usernameUntouched = form.form.get(&#39;username&#39;).untouched;   
        console.log(&#39;untouched&#39;,   this.usernameUntouched);
      }
  }

  小结: 在使用字段的状态属性时， Tauchen Sie tief in die Formen in Angular ein比模板式表单更方便，可以节省很多代码，而且比较可控。所以模板式表单适合用于一些简单的场景。

  更多编程相关知识，请访问：编程视频！！

Das obige ist der detaillierte Inhalt vonTauchen Sie tief in die Formen in Angular ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!