この記事では、主に Angular でのレスポンシブ フォームの導入について説明します。これは、必要な友達に共有します。
レスポンシブ フォームは、コンポーネント クラスに記述します。テンプレート内で制御が行われるテンプレート駆動型のフォームとは異なります。リアクティブ フォームは柔軟性があり、あらゆる複雑なフォーム シナリオの処理に使用できます。 HTML コードを減らし、より多くのコンポーネント コードを作成することで、単体テストが容易になります。
フォームベースとインターフェース
フォームベース
<form novalidate>
<label>
<span>Full name</span>
<input
type="text"
name="name"
placeholder="Your full name">
</label>
<p>
<label>
<span>Email address</span>
<input
type="email"
name="email"
placeholder="Your email address">
</label>
<label>
<span>Confirm address</span>
<input
type="email"
name="confirm"
placeholder="Confirm your email address">
</label>
</p>
<button type="submit">Sign up</button>
</form>ログイン後にコピー
次に実装したい機能は次のとおりです:
FormControl - 単一のフォーム コントロールのサポートを提供し、コントロールの値と検証ステータスを追跡するために使用できるクラスです。 、一連のパブリック API も提供します。
使用例:
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
...,
ReactiveFormsModule
],
declarations: [...],
bootstrap: [...]
})
export class AppModule {}ログイン後にコピー
FormGroup - FormControl グループの値と検証ステータスを追跡するために使用できる FormControl インスタンスのセットが含まれており、一連のパブリック API も提供します。
使用例:
import { Component } from '@angular/core';
@Component({
selector: 'signup-form',
template: `
<form novalidate>...</form>
`
})
export class SignupFormComponent {
constructor() {}
}ログイン後にコピー
FormControl インスタンスと FormGroup インスタンスを作成したので、その使用方法を見てみましょう:
ngOnInit() {
this.myControl = new FormControl('');
}ログイン後にコピー
上記の例では、作成した myGroup オブジェクトをバインドするために [formGroup] を使用する必要があります。ただし、作成した FormControl コントロールをバインドするには、formControlName ディレクティブを使用する必要があります。この時点のフォーム構造は次のとおりです:
ngOnInit() {
this.myGroup = new FormGroup({
name: new FormControl(''),
location: new FormControl('')
});
}ログイン後にコピー
FormGroup モデルの実装
signup.interface.ts
<form novalidate [formGroup]="myGroup">
Name: <input type="text" formControlName="name">
Location: <input type="text" formControlName="location">
</form>
ログイン後にコピー
対応するフォーム構造は次のとおりです:
FormGroup -> 'myGroup'
FormControl -> 'name'
FormControl -> 'location'
ログイン後にコピー
はい、ネストされた FormGroup コレクションを作成できます。 (初期データなしで) コンポーネントを更新しましょう:
export interface User {
name: string;
account: {
email: string;
confirm: string;
}
}ログイン後にコピー
初期データを設定したい場合は、上の例のように行うことができます。通常、フォームの初期情報はサーバーが提供するAPIインターフェースを通じて取得します。
FormGroup モデルのバインド
FormGroup モデルをインスタンス化したので、今度はそれを対応する DOM 要素にバインドします。具体的な例は次のとおりです。
FormGroup -> 'user'
FormControl -> 'name'
FormGroup -> 'account'
FormControl -> 'email'
FormControl -> 'confirm'
ログイン後にコピー
FormGroup オブジェクトと FormControl オブジェクト、および DOM 構造間の関連情報は次のとおりです:
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
@Component({...})
export class SignupFormComponent implements OnInit {
user: FormGroup;
ngOnInit() {
this.user = new FormGroup({
name: new FormControl(''),
account: new FormGroup({
email: new FormControl(''),
confirm: new FormControl('')
})
});
}
}ログイン後にコピー
リアクティブ送信
テンプレート駆動型フォームと同様に、ngSubmit を通じてフォーム送信ロジックを処理できます。出力属性:
<form novalidate [formGroup]="user">
<label>
<span>Full name</span>
<input
type="text"
placeholder="Your full name"
formControlName="name">
</label>
<p formGroupName="account">
<label>
<span>Email address</span>
<input
type="email"
placeholder="Your email address"
formControlName="email">
</label>
<label>
<span>Confirm address</span>
<input
type="email"
placeholder="Confirm your email address"
formControlName="confirm">
</label>
</p>
<button type="submit">Sign up</button>
</form>ログイン後にコピー
リアクティブエラー検証
次に、検証ルールをフォームに追加します。まず、@angular/forms からバリデータをインポートする必要があります。具体的な使用例は次のとおりです。
// JavaScript APIs
FormGroup -> 'user'
FormControl -> 'name'
FormGroup -> 'account'
FormControl -> 'email'
FormControl -> 'confirm'
// DOM bindings
formGroup -> 'user'
formControlName -> 'name'
formGroupName -> 'account'
formControlName -> 'email'
formControlName -> 'confirm'
ログイン後にコピー
上記の例を通じて、フォーム コントロールに複数の検証ルールが含まれている場合、配列を使用して複数の検証ルールを宣言できることがわかります。含める検証ルールが 1 つだけの場合は、それを直接宣言するだけです。この方法では、テンプレートの入力コントロールに必須の属性を追加する必要がありません。次に、フォームの検証が失敗した場合にフォームの送信を許可しない機能を追加しましょう:
<form novalidate (ngSubmit)="onSubmit()" [formGroup]="user">
...
</form>
ログイン後にコピー
それでは、フォーム コントロールの検証情報をどのように取得するかが問題になります。次のように、テンプレート駆動フォームで導入されたメソッドを使用できます:
ngOnInit() {
this.user = new FormGroup({
name: new FormControl('', [Validators.required, Validators.minLength(2)]),
account: new FormGroup({
email: new FormControl('', Validators.required),
confirm: new FormControl('', Validators.required)
})
});
}ログイン後にコピー
ログイン後にコピー
さらに、FormGroup オブジェクトによって提供される API を使用して、フォーム コントロールの検証のエラー情報を取得することもできます:
<form novalidate (ngSubmit)="onSubmit(user)" [formGroup]="user">
...
<button type="submit" [disabled]="user.invalid">Sign up</button>
</form>
ログイン後にコピー
それでは、完全なコードを見てください:
<form novalidate [formGroup]="user">
{{ user.controls.name?.errors | json }}
</form>ログイン後にコピー
この関数は実装されていますが、FormGroup オブジェクトの作成方法が少し面倒であることは Angular チームも認識しているため、上記の操作を簡素化する FormBuilder を提供しています。
FormBuilder による簡素化
まず、@angular/forms から FormBuilder をインポートする必要があります:
<form novalidate [formGroup]="user">
{{ user.get('name').errors | json }}
</form>ログイン後にコピー
次に、FormBuilder オブジェクトによって提供される group() メソッドを使用して、FormGroup オブジェクトと FormControl オブジェクトを作成します:
調整前のコード (そうではありません) FormBuilder使用):
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { User } from './signup.interface';
@Component({
selector: 'signup-form',
template: `
<form novalidate (ngSubmit)="onSubmit(user)" [formGroup]="user">
<label>
<span>Full name</span>
<input type="text" placeholder="Your full name" formControlName="name">
</label>
<p class="error" *ngIf="user.get('name').hasError('required') &&
user.get('name').touched">
Name is required
</p>
<p class="error" *ngIf="user.get('name').hasError('minlength') &&
user.get('name').touched">
Minimum of 2 characters
</p>
<p formGroupName="account">
<label>
<span>Email address</span>
<input type="email" placeholder="Your email address" formControlName="email">
</label>
<p
class="error"
*ngIf="user.get('account').get('email').hasError('required') &&
user.get('account').get('email').touched">
Email is required
</p>
<label>
<span>Confirm address</span>
<input type="email" placeholder="Confirm your email address"
formControlName="confirm">
</label>
<p
class="error"
*ngIf="user.get('account').get('confirm').hasError('required') &&
user.get('account').get('confirm').touched">
Confirming email is required
</p>
</p>
<button type="submit" [disabled]="user.invalid">Sign up</button>
</form>
`
})
export class SignupFormComponent implements OnInit {
user: FormGroup;
constructor() {}
ngOnInit() {
this.user = new FormGroup({
name: new FormControl('', [Validators.required, Validators.minLength(2)]),
account: new FormGroup({
email: new FormControl('', Validators.required),
confirm: new FormControl('', Validators.required)
})
});
}
onSubmit({ value, valid }: { value: User, valid: boolean }) {
console.log(value, valid);
}
}ログイン後にコピー
調整後のコード(FormBuilder使用):
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
export class SignupFormComponent implements OnInit {
user: FormGroup;
constructor(private fb: FormBuilder) {}
...
}ログイン後にコピー
調整前と調整後のコードを比べてみると、一気に便利になったと感じませんか？アップデート後の完全なコードは次のとおりです:
ngOnInit() {
this.user = new FormGroup({
name: new FormControl('', [Validators.required, Validators.minLength(2)]),
account: new FormGroup({
email: new FormControl('', Validators.required),
confirm: new FormControl('', Validators.required)
})
});
}ログイン後にコピー
ログイン後にコピー
以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。
関連するおすすめ:
Jqueryのパラメータ受け渡しAngularJS で取得/投稿
以上がAngular のレスポンシブ フォームの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
