Angular Learning spricht von zwei Arten von Formen

Dieser Artikel wird Ihnen helfen, die Formulare in Angular zu verstehen und mehr über die beiden Arten von Formularen zu erfahren: vorlagengesteuert und modellgesteuert. Ich hoffe, er wird Ihnen hilfreich sein!

In Angular gibt es zwei Arten von Formularen, nämlich vorlagengesteuert und modellgesteuert. [Verwandte Tutorial-Empfehlungen: „模板驱动和模型驱动。【相关教程推荐：《angular教程》】

一、模板驱动

1.1 概述

表单的控制逻辑写在组件模板中，适合简单的表单类型。

1.2 快速上手

1）、引入依赖模块 FormsModule

import { FormsModule } from "@angular/forms"

@NgModule({
  imports: [FormsModule],
})
export class AppModule {}

2）、将 DOM 表单转换为 ngForm

<form #f="ngForm" (submit)="onSubmit(f)"></form>

3）、声明表单字段为 ngModel

<form #f="ngForm" (submit)="onSubmit(f)">
  <input type="text" name="username" ngModel />
  <button>提交</button>
</form>

4）、获取表单字段值

import { NgForm } from "@angular/forms"

export class AppComponent {
  onSubmit(form: NgForm) {
    console.log(form.value) // {username: ''}
  }
}

5）、表单分组

<form #f="ngForm" (submit)="onSubmit(f)">
  <div ngModelGroup="user">
    <input type="text" name="username" ngModel />
  </div>
  <div ngModelGroup="contact">
    <input type="text" name="phone" ngModel />
  </div>
  <button>提交</button>
</form>

import { NgForm } from "@angular/forms"

export class AppComponent {
 onSubmit(form: NgForm) {
   console.log(form.value) // {contact: {phone: ''}, user:{username: ''}}
 }
}

1.3 表单验证

• required 必填字段
• minlength 字段最小长度
• maxlength 字段最大长度
• pattern 验证正则 例如：pattern=“d” 匹配一个数值

<form #f="ngForm" (submit)="onSubmit(f)">
  <input type="text" name="username" ngModel required pattern="\d" />
  <button>提交</button>
</form>

export class AppComponent {
  onSubmit(form: NgForm) {
    // 查看表单整体是否验证通过
    console.log(form.valid)
  }
}

<!-- 表单整体未通过验证时禁用提交表单 -->
<button type="submit" [disabled]="f.invalid">提交</button>

在组件模板中显示表单项未通过时的错误信息。

<form #f="ngForm" (submit)="onSubmit(f)">
  <input #username="ngModel" />
  <div *ngIf="username.touched && !username.valid && username.errors">
    <div *ngIf="username.errors.required">请填写用户名</div>
    <div *ngIf="username.errors.pattern">不符合正则规则</div>
  </div>
</form>

指定表单项未通过验证时的样式。

input.ng-touched.ng-invalid {
  border: 2px solid red;
}

二、模型驱动

2.1 概述

表单的控制逻辑写在组件类中，对验证逻辑拥有更多的控制权，适合复杂的表单的类型。

在模型驱动表单中，表单字段需要是 FormControl类的实例，实例对象可以验证表单字段中的值，值是否被修改过等等

一组表单字段构成整个表单，整个表单需要是 FormGroup 类的实例，它可以对表单进行整体验证。

• FormControl：表单组中的一个表单项

• FormGroup：表单组，表单至少是一个 FormGroup

• FormArray：用于复杂表单，可以动态添加表单项或表单组，在表单验证时，FormArray 中有一项没通过，整体没通过。

2.2 快速上手

1）、引入 ReactiveFormsModule

import { ReactiveFormsModule } from "@angular/forms"

@NgModule({
  imports: [ReactiveFormsModule]
})
export class AppModule {}

2）、在组件类中创建 FormGroup 表单控制对象

import { FormControl, FormGroup } from "@angular/forms"

export class AppComponent {
  contactForm: FormGroup = new FormGroup({
    name: new FormControl(),
    phone: new FormControl()
  })
}

3）、关联组件模板中的表单

<form [formGroup]="contactForm" (submit)="onSubmit()">
  <input type="text" formControlName="name" />
  <input type="text" formControlName="phone" />
  <button>提交</button>
</form>

4）、获取表单值

export class AppComponent {
  onSubmit() {
    console.log(this.contactForm.value)
  }
}

5）、设置表单默认值

contactForm: FormGroup = new FormGroup({
  name: new FormControl("默认值"),
  phone: new FormControl(15888888888)
})

6）、表单分组

contactForm: FormGroup = new FormGroup({
  fullName: new FormGroup({
    firstName: new FormControl(),
    lastName: new FormControl()
  }),
  phone: new FormControl()
})

<form [formGroup]="contactForm" (submit)="onSubmit()">
  <div formGroupName="fullName">
    <input type="text" formControlName="firstName" />
    <input type="text" formControlName="lastName" />
  </div>
  <input type="text" formControlName="phone" />
  <button>提交</button>
</form>

onSubmit() {
  console.log(this.contactForm.value.name.username)
  console.log(this.contactForm.get(["name", "username"])?.value)
}

2.3 FormArray

需求：在页面中默认显示一组联系方式，通过点击按钮可以添加更多联系方式组。

import { Component, OnInit } from "@angular/core"
import { FormArray, FormControl, FormGroup } from "@angular/forms"
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styles: []
})
export class AppComponent implements OnInit {
  // 表单
  contactForm: FormGroup = new FormGroup({
    contacts: new FormArray([])
  })

  get contacts() {
    return this.contactForm.get("contacts") as FormArray
  }

  // 添加联系方式
  addContact() {
    // 联系方式
    const myContact: FormGroup = new FormGroup({
      name: new FormControl(),
      address: new FormControl(),
      phone: new FormControl()
    })
    // 向联系方式数组中添加联系方式
    this.contacts.push(myContact)
  }

  // 删除联系方式
  removeContact(i: number) {
    this.contacts.removeAt(i)
  }

  ngOnInit() {
    // 添加默认的联系方式
    this.addContact()
  }

  onSubmit() {
    console.log(this.contactForm.value)
  }
}

<form [formGroup]="contactForm" (submit)="onSubmit()">
  <div formArrayName="contacts">
    <div
      *ngFor="let contact of contacts.controls; let i = index"
      [formGroupName]="i"
    >
      <input type="text" formControlName="name" />
      <input type="text" formControlName="address" />
      <input type="text" formControlName="phone" />
      <button (click)="removeContact(i)">删除联系方式</button>
    </div>
  </div>
  <button (click)="addContact()">添加联系方式</button>
  <button>提交</button>
</form>

2.4 内置表单验证器

1）、使用内置验证器提供的验证规则验证表单字段

import { FormControl, FormGroup, Validators } from "@angular/forms"

contactForm: FormGroup = new FormGroup({
  name: new FormControl("默认值", [
    Validators.required,
    Validators.minLength(2)
  ])
})

2）、获取整体表单是否验证通过

onSubmit() {
  console.log(this.contactForm.valid)
}

<!-- 表单整体未验证通过时禁用表单按钮 -->
<button [disabled]="contactForm.invalid">提交</button>

3）、在组件模板中显示为验证通过时的错误信息

get name() {
  return this.contactForm.get("name")!
}

<form [formGroup]="contactForm" (submit)="onSubmit()">
  <input type="text" formControlName="name" />
  <div *ngIf="name.touched && name.invalid && name.errors">
    <div *ngIf="name.errors.required">请填写姓名</div>
    <div *ngIf="name.errors.maxlength">
      姓名长度不能大于
      {{ name.errors.maxlength.requiredLength }} 实际填写长度为
      {{ name.errors.maxlength.actualLength }}
    </div>
  </div>
</form>

2.5 自定义同步表单验证器

• 自定义验证器的类型是 TypeScript 类

• 类中包含具体的验证方法，验证方法必须为静态方法

• 验证方法有一个参数 control，类型为 AbstractControl。其实就是 FormControl 类的实例对象的类型

• 如果验证成功，返回 null

• 如果验证失败，返回对象，对象中的属性即为验证标识，值为 true，标识该项验证失败

• 验证方法的返回值为 ValidationErrors | null

import { AbstractControl, ValidationErrors } from "@angular/forms"

export class NameValidators {
  // 字段值中不能包含空格
  static cannotContainSpace(control: AbstractControl): ValidationErrors | null {
    // 验证未通过
    if (/\s/.test(control.value)) return { cannotContainSpace: true }
    // 验证通过
    return null
  }
}

import { NameValidators } from "./Name.validators"

contactForm: FormGroup = new FormGroup({
  name: new FormControl("", [
    Validators.required,
    NameValidators.cannotContainSpace
  ])
})

<div *ngIf="name.touched && name.invalid && name.errors">
	<div *ngIf="name.errors.cannotContainSpace">姓名中不能包含空格</div>
</div>

2.6 自定义异步表单验证器

import { AbstractControl, ValidationErrors } from "@angular/forms"
import { Observable } from "rxjs"

export class NameValidators {
  static shouldBeUnique(control: AbstractControl): Promise<ValidationErrors | null> {
    return new Promise(resolve => {
      if (control.value == "admin") {
         resolve({ shouldBeUnique: true })
       } else {
         resolve(null)
       }
    })
  }
}

contactForm: FormGroup = new FormGroup({
    name: new FormControl(
      "",
      [
        Validators.required
      ],
      NameValidators.shouldBeUnique
    )
  })

<div *ngIf="name.touched && name.invalid && name.errors">
  <div *ngIf="name.errors.shouldBeUnique">用户名重复</div>
</div>
<div *ngIf="name.pending">正在检测姓名是否重复</div>

2.7 FormBuilder

创建表单的快捷方式。

• this.fb.control：表单项

• this.fb.group：表单组，表单至少是一个 FormGroup

• this.fb.arrayAngular Tutorial“]

1. Vorlagentreiber

1.1 Übersicht

🎜Die Steuerlogik des Formulars ist geschrieben in Komponentenvorlage eignet sich für einfache Formulartypen. 🎜🎜🎜🎜1.2 Schnell loslegen🎜🎜🎜🎜1), abhängiges Modul FormsModule🎜

import { FormBuilder, FormGroup, Validators } from "@angular/forms"

export class AppComponent {
  contactForm: FormGroup
  constructor(private fb: FormBuilder) {
    this.contactForm = this.fb.group({
      fullName: this.fb.group({
        firstName: ["", [Validators.required]],
        lastName: [""]
      }),
      phone: []
    })
  }
}

🎜 einführen, DOM-Formular in ngForm konvertieren🎜

<div>
  <input type="text" [(ngModal)]="name" (ngModalChange)="nameChange()" />
</div>

🎜3), Formularfelder als ngModel deklarieren🎜

import { FormControl, FormGroup } from "@angular/forms"

export class AppComponent {
  public name = 'a';
  public nameChange() {
  }
}

🎜4), Formularfelder abrufen Wert🎜

<div [formGroup]="contactForm">
  <input type="text" formControlName="name" />
</div>

🎜5), Formulargruppierung🎜

import { FormControl, FormGroup } from "@angular/forms"

export class AppComponent {
  contactForm: FormGroup = new FormGroup({
    name: new FormControl()
  })
	
	ngOnInt() {
		this.contactForm.get("name").valueChanges.subscribe(data => {
			console.log(data);
		}
	}
}

<form [formGroup]="form" (submit)="onSubmit()">
  <label *ngFor="let item of Data">
    <input type="checkbox" [value]="item.value" (change)="onChange($event)" />
    {{ item.name }}
  </label>
  <button>提交</button>
</form>

🎜🎜🎜1.3 Formularvalidierung🎜🎜🎜

• erforderliches Pflichtfeld🎜
• minlength minimale Feldlänge🎜
• maxlength maximale Feldlänge🎜
• Muster Beispiel für eine reguläre Validierung: Pattern="d" stimmt mit einem numerischen Wert überein. 🎜🎜

  import { Component } from "@angular/core"
  import { FormArray, FormBuilder, FormGroup } from "@angular/forms"
  interface Data {
    name: string
    value: string
  }
  @Component({
    selector: "app-checkbox",
    templateUrl: "./checkbox.component.html",
    styles: []
  })
  export class CheckboxComponent {
    Data: Array<Data> = [
      { name: "Pear", value: "pear" },
      { name: "Plum", value: "plum" },
      { name: "Kiwi", value: "kiwi" },
      { name: "Apple", value: "apple" },
      { name: "Lime", value: "lime" }
    ]
    form: FormGroup
  
    constructor(private fb: FormBuilder) {
      this.form = this.fb.group({
        checkArray: this.fb.array([])
      })
    }
  
    onChange(event: Event) {
      const target = event.target as HTMLInputElement
      const checked = target.checked
      const value = target.value
      const checkArray = this.form.get("checkArray") as FormArray
  
      if (checked) {
        checkArray.push(this.fb.control(value))
      } else {
        const index = checkArray.controls.findIndex(
          control => control.value === value
        )
        checkArray.removeAt(index)
      }
    }
  
    onSubmit() {
      console.log(this.form.value)
    }
  }

  export class AppComponent {
    form: FormGroup
  
    constructor(public fb: FormBuilder) {
      this.form = this.fb.group({ gender: "" })
    }
  
    onSubmit() {
      console.log(this.form.value)
    }
  }

  <form [formGroup]="form" (submit)="onSubmit()">
    <input type="radio" value="male" formControlName="gender" /> Male
    <input type="radio" value="female" formControlName="gender" /> Female
    <button type="submit">Submit</button>
  </form>

  🎜 zeigt die Fehlermeldung an, wenn das Formularelement in der Komponentenvorlage fehlschlägt. 🎜rrreee🎜Geben Sie den Stil an, wenn das Formularelement die Validierung nicht besteht. 🎜rrreee

  🎜2. Modellgesteuert🎜
  

  🎜🎜🎜2.1 Übersicht🎜🎜🎜🎜Die Steuerlogik des Formulars ist in der Komponente geschrieben class , hat mehr Kontrolle über die Validierungslogik und eignet sich für komplexe Formulartypen. 🎜🎜In einem modellgesteuerten Formular muss das Formularfeld eine Instanz der Klasse FormControl sein. Das Instanzobjekt kann den Wert im Formularfeld überprüfen Wert wurde geändert usw. 🎜🎜
  Eine Reihe von Formularfeldern. Das gesamte Formular muss eine Instanz der FormGroup-Klasse sein, die eine gesamte-Validierung für das Formular durchführen kann. 🎜🎜🎜
  • 🎜FormControl: ein Formularelement in der Formulargruppe🎜🎜
  • 🎜FormGroup: Formulargruppe, das Formular ist mindestens eine FormGroup🎜🎜
  • 🎜FormArray: wird verwendet für Bei komplexen Formularen können Sie Formularelemente oder Formulargruppen dynamisch hinzufügen. Während der Formularvalidierung schlägt ein Element im FormArray fehl und das Ganze schlägt fehl. 🎜🎜🎜🎜🎜🎜2.2 Schnell loslegen🎜🎜🎜🎜1), ReactiveFormsModule einführen🎜rrreee🎜2), ein FormGroup-Formularsteuerobjekt in der Komponentenklasse erstellen🎜rrreee🎜3), das Formular in der Komponentenvorlage zuordnen🎜rrreee 🎜4) Formularwert abrufen🎜rrreee🎜5), Formular-Standardwert festlegen🎜rrreee🎜6), Formulargruppierung🎜rrreeerrreeerrreee🎜🎜🎜2.3 FormArray🎜🎜🎜🎜Anforderungen: Auf der Seite werden standardmäßig eine Reihe von Kontaktinformationen angezeigt , und Sie können es hinzufügen, indem Sie auf die Schaltfläche Weitere Kontaktgruppen klicken. 🎜rrreeerrreee🎜🎜🎜2.4 Eingebauter Formularvalidator🎜🎜🎜🎜1), verwenden Sie die vom integrierten Validator bereitgestellten Validierungsregeln, um die Formularfelder zu überprüfen🎜rrreee🎜2), ermitteln Sie, ob das gesamte Formular überprüft wurde oder nicht🎜 rrreeerrreee🎜3), in der Komponentenvorlage. Wird als Fehlermeldung angezeigt, wenn die Überprüfung erfolgreich ist Der Typ des benutzerdefinierten Validators ist die TypeScript-Klasse. 🎜🎜
  • 🎜Die Klasse enthält spezifische Überprüfungsmethoden, bei denen es sich um statische Methoden handeln muss.🎜🎜
  • 🎜Die Überprüfungsmethode verfügt über eine Parametersteuerung, der Typ ist AbstractControl. Tatsächlich handelt es sich um den Typ des Instanzobjekts der FormControl-Klasse. 🎜🎜
  • 🎜Wenn die Überprüfung erfolgreich ist, wird null zurückgegeben.🎜🎜
  • 🎜Wenn die Überprüfung fehlschlägt, wird das Attribut im Objekt zurückgegeben ist die Verifizierungsidentifikation und der Wert ist wahr, was das Element identifiziert. Die Validierung ist fehlgeschlagen🎜🎜
  • 🎜Der Rückgabewert der Validierungsmethode ist „ValidationErrors“ | rrreeerrreeerrreee🎜🎜🎜2.7 FormBuilder🎜🎜 🎜🎜Formular erstellen Schnell. 🎜
    • 🎜this.fb.control: Formularelement 🎜🎜
    • 🎜this.fb.group< /code>: Formulargruppe, das Formular ist mindestens eine FormGroup🎜🎜<li>🎜<code>this.fb.array: Wird für komplexe Formulare verwendet. Sie können während des Formulars dynamisch Formularelemente oder Formulargruppen hinzufügen Validierung, ein Element in FormArray ist fehlgeschlagen, und das Ganze ist fehlgeschlagen. 🎜🎜🎜rrreee🎜🎜🎜2.8 Überwachen Sie Änderungen in Formularwerten🎜🎜🎜

      实际工作中，我们常常需要根据某个表单值得变化而进行相应的处理，一般可以使用ngModalChange或者表单来实现

      2.8.1 ngModalChange

      <div>
        <input type="text" [(ngModal)]="name" (ngModalChange)="nameChange()" />
      </div>

      import { FormControl, FormGroup } from "@angular/forms"
      
      export class AppComponent {
        public name = 'a';
        public nameChange() {
        }
      }

      angular官方并不建议使用ngModalChange。

      2.8.2 表单控制

      <div [formGroup]="contactForm">
        <input type="text" formControlName="name" />
      </div>

      import { FormControl, FormGroup } from "@angular/forms"
      
      export class AppComponent {
        contactForm: FormGroup = new FormGroup({
          name: new FormControl()
        })
      	
      	ngOnInt() {
      		this.contactForm.get("name").valueChanges.subscribe(data => {
      			console.log(data);
      		}
      	}
      }

      2.9 练习

      1）、获取一组复选框中选中的值

      <form [formGroup]="form" (submit)="onSubmit()">
        <label *ngFor="let item of Data">
          <input type="checkbox" [value]="item.value" (change)="onChange($event)" />
          {{ item.name }}
        </label>
        <button>提交</button>
      </form>

      import { Component } from "@angular/core"
      import { FormArray, FormBuilder, FormGroup } from "@angular/forms"
      interface Data {
        name: string
        value: string
      }
      @Component({
        selector: "app-checkbox",
        templateUrl: "./checkbox.component.html",
        styles: []
      })
      export class CheckboxComponent {
        Data: Array<Data> = [
          { name: "Pear", value: "pear" },
          { name: "Plum", value: "plum" },
          { name: "Kiwi", value: "kiwi" },
          { name: "Apple", value: "apple" },
          { name: "Lime", value: "lime" }
        ]
        form: FormGroup
      
        constructor(private fb: FormBuilder) {
          this.form = this.fb.group({
            checkArray: this.fb.array([])
          })
        }
      
        onChange(event: Event) {
          const target = event.target as HTMLInputElement
          const checked = target.checked
          const value = target.value
          const checkArray = this.form.get("checkArray") as FormArray
      
          if (checked) {
            checkArray.push(this.fb.control(value))
          } else {
            const index = checkArray.controls.findIndex(
              control => control.value === value
            )
            checkArray.removeAt(index)
          }
        }
      
        onSubmit() {
          console.log(this.form.value)
        }
      }

      2）、获取单选框中选中的值

      export class AppComponent {
        form: FormGroup
      
        constructor(public fb: FormBuilder) {
          this.form = this.fb.group({ gender: "" })
        }
      
        onSubmit() {
          console.log(this.form.value)
        }
      }

      <form [formGroup]="form" (submit)="onSubmit()">
        <input type="radio" value="male" formControlName="gender" /> Male
        <input type="radio" value="female" formControlName="gender" /> Female
        <button type="submit">Submit</button>
      </form>

      2.10 其他

      • patchValue：设置表单控件的值（可以设置全部，也可以设置其中某一个，其他不受影响）

      • setValue：设置表单控件的值 (设置全部，不能排除任何一个)

      • valueChanges：当表单控件的值发生变化时被触发的事件

      • reset：表单内容置空

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

      Das obige ist der detaillierte Inhalt vonAngular Learning spricht von zwei Arten von Formen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!