ホーム>Web デザインのチュートリアル>JavaScript チュートリアル

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

著者：Eve Cole 更新時間：2022-08-08 13:22:08
この記事では、Angular のフォームを理解し、テンプレート駆動型とモデル駆動型の 2 種類のフォームについて学習します。お役に立てば幸いです。

Angular には、模板驱动と模型驱动の 2 種類のフォームがあります。 【おすすめ関連チュートリアル：「Angularチュートリアル」】

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

1.1 概要

フォームの控制逻辑は组件模板に記述されており、简单フォームタイプに適しています。

1.2 すぐに始めましょう

1) 
「@angular/forms」から

依存モジュール FormsModule import { FormsModule } を導入します。


@NgModule({
  インポート: [FormsModule]、
})
import class AppModule {}

2) DOM フォームを ngForm に変換します

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

3) フォーム フィールドを ngModel として宣言します

<form #f= " ngForm" (submit)="onSubmit(f)">
  <input type="text" name="ユーザー名" ngModel />
  <button>送信</button>
</form>
4) 
「@angular/forms」から

フォームフィールド値 import { NgForm } を取得します。


エクスポート クラス AppComponent {
  onSubmit(フォーム: NgForm) {
    console.log(form.value) // {ユーザー名: ''}
  }
}

5)、フォームのグループ化

<form #f="ngForm" (submit)="onSubmit(f)">
  <div ngModelGroup="ユーザー">
    <input type="text" name="ユーザー名" ngModel />
  </div>
  <div ngModelGroup="連絡先">
    <input type="text" name="phone" ngModel />
  </div>
  <button>送信</button>
</form>
import { NgForm } from "@angular/forms"

エクスポート クラス AppComponent {
 onSubmit(フォーム: NgForm) {
   console.log(form.value) // {連絡先: {電話番号: ''}、ユーザー:{ユーザー名: ''}}
 }
1.3

フォーム検証

  • は必須です 必須フィールド
  • minlength フィールド 最小長
  • maxlength フィールド 最大長
  • パターン検証の通常の例: pattern="d" は値と一致します
<form #f="ngForm" (submit)="onSubmit(f)">
  <input type="text" name="username" ngModel が必要な pattern="d" />
  <button>送信</button>
</form>
エクスポート クラス AppComponent {
  onSubmit(フォーム: 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 {
  境界線: 2 ピクセルの赤一色。
2.

モデル駆動型

2.1 概要

フォームの控制逻辑は组件类で記述されます。コンポーネント クラスは検証ロジックをより詳細に制御でき、复杂フォーム タイプに適しています。

モデル駆動型フォームでは、フォーム フィールドはFormControlクラスのインスタンスである必要があります。インスタンス オブジェクトは、验证表单字段できます。

画像の説明を追加してください
フォーム フィールドのセットはフォーム全体を構成します。フォーム全体は、フォームに対して整体検証を実行できるFormGroupクラスのインスタンスである必要があります。

画像の説明を追加してください

  • FormControl: フォーム グループ内のフォーム アイテム

  • FormGroup: フォーム グループ。フォームは少なくとも 1 つの FormGroup です。

  • フォームの検証中にフォーム アイテムまたはフォーム グループを動的に追加できます。失敗すると全体が失敗します。

2.2 すぐに始めましょう

1)、

「@angular/forms」から ReactiveFormsModule import { ReactiveFormsModule }
を導入します

@NgModule({
  インポート: [ReactiveFormsModule]
})
import class AppModule {}
2) 
「@angular/forms」から

コンポーネント クラス import { FormControl, FormGroup } に FormGroup フォーム コントロール オブジェクトを作成します。


エクスポート クラス AppComponent {
  contactForm: FormGroup = 新しい FormGroup({
    名前: 新しい FormControl()、
    電話: 新しい FormControl()
  })
3

) 関連するコンポーネント テンプレートのフォーム

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

4) フォーム値の

エクスポート クラス AppComponent {を
取得します。
  onSubmit() {
    console.log(this.contactForm.value)
  }
5

) フォームのデフォルト値

contactForm を設定します: FormGroup = new FormGroup({
  名前: new FormControl("デフォルト値")、
  電話番号: 新しい FormControl(15888888888)
})

6)、フォームのグループ化

contactForm: FormGroup = new FormGroup({
  fullName: 新しい FormGroup({
    firstName: 新しい FormControl()、
    姓: 新しい FormControl()
  })、
  電話: 新しい FormControl()
})
<form [formGroup]="contactForm" (submit)="onSubmit()">
  <div formGroupName="フルネーム">
    <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(["名前", "ユーザー名"])?.value)

2.3 FormArray の

要件

: 連絡先情報のグループがデフォルトでページに表示され、ボタンをクリックするとさらに連絡先情報グループを追加できます。

import { Component, OnInit } from "@angular/core"
import { FormArray, FormControl, FormGroup } from "@angular/forms"
@成分（{
  セレクター: "アプリルート",
  templateUrl: "./app.component.html",
  スタイル: []
})
エクスポート クラス AppComponent は OnInit を実装します {
  // フォーム contactForm: FormGroup = new FormGroup({
    連絡先: new FormArray([])
  })

  連絡先を取得() {
    this.contactForm.get("contacts") を FormArray として返します
  }

  //連絡先情報を追加 addContact() {
    //連絡先情報 const myContact: FormGroup = new FormGroup({
      名前: 新しい FormControl()、
      アドレス: 新しい FormControl()、
      電話: 新しい 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="連絡先">
    <div
      *ngFor="contacts.controls の連絡先を許可します; let i = インデックス"
      [フォームグループ名]="i"
    >
      <input type="text" formControlName="name" />
      <input type="text" formControlName="アドレス" />
      <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 = 新しい FormGroup({
  名前: new FormControl("デフォルト値", [
    バリデータ.必須、
    Validators.minLength(2)
  ])
})

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

onSubmit() {
  console.log(this.contactForm.valid)
<
!-- フォーム全体が検証に失敗した場合にフォーム ボタンを無効にする -->
<button [disabled]="contactForm.invalid">送信</button>

3) コンポーネント テンプレート

get name() {
で検証に合格したときにエラー メッセージを表示します。
  return this.contactForm.get("名前")!

<form [formGroup]="contactForm" (submit)="onSubmit()"
>
  <input type="text" formControlName="name" />
  <div *ngIf="名前.タッチされました && 名前.無効 && 名前.エラー">
    <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 型のパラメーター コントロールが必要です。実際には、これは FormControl クラスのインスタンス オブジェクトの型であり、

  • 検証が成功した場合は null が返され、

  • オブジェクトの属性は検証 ID であり、値は次のとおりです。 true は検証が失敗したことを示します。

  • 検証メソッドの戻り値は ValidationErrors null

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

エクスポート クラス NameValidators {
  // フィールド値にはスペースを含めることはできません staticCannotContainSpace(control: AbstractControl): ValidationErrors |
    // 検証に失敗した場合 (/s/.test(control.value)) return {CannotContainSpace: true }
    //検証に合格しました return null
  }

"./Name.validators" から { NameValidators } をインポートし
ます

contactForm: FormGroup = 新しい FormGroup({
  名前: 新しい FormControl("", [
    バリデータ.必須、
    NameValidators.cannotContainSpace
  ])
})
<div *ngIf="名前.タッチされました && 名前.無効 && 名前.エラー">
	<div *ngIf="name.errors.cannotContainSpace">名前にスペースを含めることはできません</div>
</div>

2.6 カスタム非同期フォームバリデータ

インポート { AbstractControl, ValidationErrors } from "@angular/forms"
import { Observable } from "rxjs"

エクスポート クラス NameValidators {
  static shouldBeUnique(control: AbstractControl): Promise<ValidationErrors> {
    新しい Promise を返す(resolve => {
      if (control.value == "管理者") {
         solve({ shouldBeUnique: true })
       } それ以外 {
         解決(null)
       }
    })
  }

contactForm: FormGroup = 新しい FormGroup(
{
    名前: 新しいフォームコントロール(
      「」、
      [
        バリデーター必須
      ]、
      NameValidators.ShouldBeUnique
    )
  })
<div *ngIf="名前.タッチされました && 名前.無効 && 名前.エラー">
  <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 です。項目が失敗し、全体が失敗しました。

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

エクスポート クラス AppComponent {
  contactForm: フォームグループ
  コンストラクター(プライベート FB: FormBuilder) {
    this.contactForm = this.fb.group({
      フルネーム: this.fb.group({
        firstName: ["", [Validators.required]],
        苗字： [""]
      })、
      電話： []
    })
  }
2.8

フォーム値の変更の監視

実際の作業では、フォーム値の変更に基づいて対応する処理を実行する必要があることがよくあります。通常、

2.8.1 ngModalChange

<div>

を実現するには、 ngModalChangeまたはフォームを使用します。

  <input type="text" [(ngModal)]="name" (ngModalChange)="nameChange()" />
</div>
import { FormControl, FormGroup } from "@angular/forms"

エクスポート クラス AppComponent {
  パブリック名 = 'a';
  パブリック nameChange() {
  }
Angular

は公式に ngModalChange の使用を推奨していません。

2.8.2 フォームコントロール

<div [formGroup]="contactForm">
  <input type="text" formControlName="name" />
</div>
import { FormControl, FormGroup } from "@angular/forms"

エクスポート クラス AppComponent {
  contactForm: FormGroup = 新しい FormGroup({
    名前: 新しい FormControl()
  })
	
	ngOnInt() {
		this.contactForm.get("name").valueChanges.subscribe(data => {
			コンソール.ログ(データ);
		}
	}
2.9

演習

1)、チェック ボックスのグループで選択された値を取得します

<form [formGroup]="form" (submit)="onSubmit()">
  <label *ngFor="データの項目">
    <input type="checkbox" [value]="item.value" (change)="onChange($event)" />
    {{ 項目.名 }}
  </label>
  <button>送信</button>
</form>
import { Component } from "@angular/core"
import { FormArray, FormBuilder, FormGroup } from "@angular/forms"
インターフェース データ {
  名前: 文字列
  値: 文字列
}
@成分（{
  セレクター: "アプリチェックボックス",
  templateUrl: "./checkbox.component.html",
  スタイル: []
})
エクスポートクラス CheckboxComponent {
  データ: 配列<データ> = [
    { 名前: "梨"、値: "梨" },
    { 名前: "プラム"、値: "プラム" },
    { 名前: "キウイ"、値: "キウイ" },
    { 名前: "アップル"、値: "アップル" },
    { 名前: "ライム"、値: "ライム" }
  】
  フォーム: フォームグループ

  コンストラクター(プライベート FB: FormBuilder) {
    this.form = this.fb.group({
      checkArray: this.fb.array([])
    })
  }

  onChange(イベント: イベント) {
    const target = events.target as HTMLInputElement
    const チェック済み = target.checked
    const 値 = target.value
    const checkArray = this.form.get("checkArray") as FormArray

    if (チェックされている) {
      checkArray.push(this.fb.control(値))
    } それ以外 {
      const インデックス = checkArray.controls.findIndex(
        コントロール => コントロール.値 === 値
      )
      checkArray.removeAt(インデックス)
    }
  }

  onSubmit() {
    console.log(this.form.value)
  }
2
) ラジオ ボタンの
エクスポート クラス AppComponent

で選択された値を取得します

。
  フォーム: フォームグループ

  コンストラクター(パブリック FB: FormBuilder) {
    this.form = this.fb.group({ 性別: "" })
  }

  onSubmit() {
    console.log(this.form.value)
  }
<
form [formGroup]="フォーム" (submit)="onSubmit()">
  <input type="radio" value="male" formControlName="gender" /> 男性
  <input type="radio" value="女性" formControlName="gender" /> 女性
  <button type="submit">送信</button>
</form>

2.10 その他

  • patchValue: フォーム コントロールの値を設定します (すべて設定することも、いずれか 1 つを設定することもできます。他は影響を受けません)

  • setValue: フォーム コントロールの値を設定します (すべて設定します。除外することはできません)いずれか 1 つ）

  • valueChanges: フォームのコントロールの値が変更されると、リセット イベントがトリガーされます

  • 。フォームのコンテンツは空白になります。
関連記事