ホームページ > 記事 > ウェブフロントエンド > Angular の 2 種類の Form フォームの簡単な分析

Angular の 2 種類の Form フォームの簡単な分析

青灯夜游転載: 2021-09-23 10:26:592605ブラウズ

この記事では、Angular の 2 つのフォームフォームについて説明し、その使用方法を簡単に紹介します。

Angular には、テンプレート駆動型とモデル駆動型の 2 種類のフォームがあります。 [関連チュートリアルの推奨事項: "angular チュートリアル"]

1. テンプレートドライバー

##1.1 概要

フォームの制御ロジックはコンポーネントテンプレートに記述されており、単純なフォームタイプに適しています

1.2 すぐに始めましょう

概要依存モジュール

FormsModule

import { FormsModule } from "@angular/forms"

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

DOM フォームを ngForm

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

フォームフィールドを

ngModel として宣言します

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

フォームフィールド値の取得

import { NgForm } from "@angular/forms"

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

フォームグループ化

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

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。モデル駆動型

#2.1 フォームの概要

## 制御ロジックはコンポーネントクラスに記述されており、これにより検証ロジックをより詳細に制御でき、複雑なフォームタイプに適しています。

モデル駆動型フォームでは、フォームフィールドは

FormControl

クラスのインスタンスである必要があります。インスタンスオブジェクトは、フォームフィールドの値、値が変更されているかどうかを確認できます。など。

フォームフィールドのグループがフォーム全体を構成します。フォーム全体は、次の処理を実行できる Angular の 2 種類の Form フォームの簡単な分析 FormGroup

クラスのインスタンスである必要があります。フォームの全体的な検証

Angular の 2 種類の Form フォームの簡単な分析

: フォームグループ
のフォームアイテム
: フォームグループ。フォームは少なくとも
FormGroup
#FormArray
FormArray
内の 1 つの項目が失敗し、全体が失敗しました
2.2クイック

はじめにReactiveFormsModule

import { ReactiveFormsModule } from "@angular/forms"

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

コンポーネントクラスで作成FormGroupフォームコントロールオブジェクト

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

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

フォームを関連付けるコンポーネントテンプレート内で<pre class="brush:html;toolbar:false;"><form [formGroup]="contactForm" (submit)="onSubmit()"> <input type="text" formControlName="name" /> <input type="text" formControlName="phone" /> <button>提交</button> </form></pre>フォーム値を取得

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

フォームのデフォルト値を設定

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

フォームグループ化

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フォームバリデータ内で

#組み込みバリデータによって提供される検証ルールを使用してフォームフィールドを検証します

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

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

フォーム全体が検証に合格したかどうかを取得します

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

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

コンポーネントテンプレートで検証が成功したときにエラーメッセージを表示します。

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

クラス

このクラスには特定の検証メソッドが含まれており、静的メソッドの検証メソッド
にはパラメータ ## が必要です。
AbstractControl
タイプの #control
FormControl
クラスのインスタンスオブジェクトの型です。検証が成功した場合は、null
を返します。
検証が失敗した場合は、オブジェクトを返します。オブジェクトの属性は検証 ID で、値は 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"

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:フォームグループ。フォームは少なくとも 1 つの
FormGroup
this.fb.array: 複雑なフォームに使用され、動的にフォームを追加できます。アイテムまたはフォームグループ、フォーム検証中に、
FormArray

Angular の 2 種類の Form フォームの簡単な分析一連のチェックボックスで選択した値を取得する

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

ラジオボタンで選択した値を取得する

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.9 其他

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

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

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

reset：表单内容置空

updateValueAndValidity：对指定输入框取消校验

validateForm: FormGroup; this.validateForm.get('cpwd').updateValueAndValidity();

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

以上がAngular の 2 種類の Form フォームの簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事はjuejin.cnで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

前の記事：JS の try catch ステートメントとその 2 つの関数を詳細に分析します。次の記事：JS の try catch ステートメントとその 2 つの関数を詳細に分析します。

続きを見る