Angular 学習では 2 種類のフォームについて説明します

この記事では、angular のフォームを理解し、テンプレート駆動型とモデル駆動型の 2 種類のフォームについて学習します。皆様のお役に立てれば幸いです。

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

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

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="\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 クラスのインスタンスである必要があります。インスタンス オブジェクトは、フォーム フィールドの値を 検証できます。値が変更されているかどうかなど。

フォーム フィールドのグループがフォーム全体を構成します。フォーム全体は、
FormGroup クラスのインスタンスである必要があります。これにより、フォームを 全体的に 検証できます。

• FormControl: フォーム グループ内のフォーム項目

• FormGroup: フォーム グループ、フォームは次のとおりです。少なくとも A FormGroup

• FormArray: フォーム項目またはフォーム グループを動的に追加できる複雑なフォームに使用されます。フォーム検証中に、FormArray 内の 1 つの項目が失敗すると、フォーム全体が失敗します。

2.2 すぐに始めましょう

1)、ReactiveFormsModule

import { ReactiveFormsModule } from "@angular/forms"

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

2) を導入してください。コンポーネント クラス

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

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

3)にFormGroupフォームコントロールオブジェクトを作成し、コンポーネントテンプレート

<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 同期フォーム Validator をカスタマイズする

• カスタム バリデータの種類は TypeScript クラスです

• クラスには特定の検証メソッドが含まれています。検証メソッドは静的メソッドである必要があります

• 検証メソッドには、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
• :フォーム グループ。フォームは少なくとも 1 つの FormGroup

this.fb.array
• : 複雑なフォームに使用され、フォーム中にフォーム項目またはフォーム グループを動的に追加できます。 validation 、FormArray 内の 1 つの項目が失敗し、全体が失敗しました。

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

• 2.8 フォーム値の変更の監視

  实际工作中，我们常常需要根据某个表单值得变化而进行相应的处理，一般可以使用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：表单内容置空

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

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