VUE3.0 をすぐに使い始める方法:
Angular では、フォームを介したユーザー入力を処理する 2 つの異なる方法 (响应式表单と模板驱动表单を提供します。 [関連チュートリアルの推奨事項:「Angular チュートリアル」]
ここではレスポンシブ フォームのみを紹介します。テンプレート駆動型フォームについては、公式 Web サイトを参照してください:
https://angular.cn/guide/forms-overview#setup-in-template-driven-forms
レスポンシブ フォーム コントロールを使用するには、 @angular/formsパッケージからReactiveFormsModuleインポートし、それをNgModuleのimports配列に追加する必要があります。次のように: app.module.ts
/***** app.module.ts *****/
import { ReactiveFormsModule } から '@angular/forms';
@NgModule({
輸入品: [
// 他のインポート ...
ReactiveFormSmodule
]、
})
import class AppModule { }フォーム コントロールを使用するには 3 つの手順があります。
アプリにリアクティブ フォーム モジュールを登録します。このモジュールは、リアクティブ フォームで使用するいくつかのディレクティブを宣言します。
新しいFormControlインスタンスを生成し、コンポーネントに保存します。
このFormControlテンプレートに登録します。
フォーム コントロールを登録するには、 FormControlクラスをインポートし、 FormControlの新しいインスタンスを作成し、それをクラスのプロパティとして保存します。次のように: test.component.ts
/***** test.component.ts *****/
import { コンポーネント } から '@angular/core';
import { FormControl } から '@angular/forms';
@成分（{
セレクター: 'アプリ名エディター',
templateUrl: './name-editor.component.html',
styleUrls: ['./name-editor.component.css']
})
エクスポートクラス TestComponent {
// FormControl のコンストラクターで初期値を設定できます。この例では、空の文字列 name = new FormControl(''); です。
}次に、テンプレートのコントロールを次のように登録しますtest.component.html
<！ - test.component.html->
<ラベル>
名前: <input type="text" [formControl]="name">
</label>
<!-- input に入力された値が変更されると、ここに表示される値も変更されます -->
<p>name: {{ name.value }}</p>
FormControlのその他のプロパティとメソッドについては、 API リファレンス マニュアルを参照してください。https://angular.cn/api/forms/FormControl#formcontrol
FormControlのインスタンスで 1 つの入力ボックスに対応するコントロールを制御できるように、 FormGroupのインスタンスでもフォーム コントロールのグループを追跡できます。 FormControlインスタンス (フォームのフォーム ステータスなど)。 FormGroupが作成されると、その中の各コントロールはその名前によって追跡されます。
次のデモ例を参照してください。 test.component.ts 、 test.component.html
import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms'
@成分（{
セレクター: 'アプリテスト',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
エクスポート クラス TestComponent は OnInit を実装します {
コンストラクター() {}
profileForm = 新しい FormGroup({
firstName: new FormControl('', [Validators.required,Validators.pattern('[a-zA-Z0-9]*')]),
lastName: new FormControl('', Validators.required),
});
onSubmit() {
// コントロールグループの各フィールドの値を確認 console.log(this.profileForm.value)
}
} <!-- profileForm この FormGroup は FormGroup ディレクティブを通じてフォーム要素にバインドされ、モデルとフォーム内の入力ボックスの間に通信層を作成します -->
<!-- FormGroup ディレクティブは、form 要素によって発行された submit イベントをリッスンし、ngSubmit イベントを発行して、コールバック関数をバインドできるようにします。 -->
<form [formgroup] = "profileform"（ngsubmit）= "onsubmit（）">
<ラベル>
<!-- FormControlName ディレクティブは、各入力ボックスを FormGroup で定義されたフォーム コントロール FormControl にバインドします。これらのフォームコントロールは、対応する要素と通信します - >
名: <input type="text" formControlName="firstName">
</label>
<ラベル>
姓: <input type="text" formControlName="lastName">
</label>
<button type="submit" [disabled]="!profileForm.valid">送信</button>
</form>
<p>{{ profileForm.value }}</p>
<!-- コントロールグループのステータス: INVALID または VALID -->
<p>{{ profileForm.status }}</p>
<!-- コントロール グループによって入力された値が有効な値であるかどうか (true または false) -->
<p>{{ profileForm.valid }}</p>
<!-- 無効にするかどうか: true または false -->
<p>{{ profileForm.disabled }}</p> は
FormGroupのその他のプロパティとメソッドについては、 API リファレンス マニュアルを参照してください。https://angular.cn/api/forms/FormGroup#formgroup
。レスポンシブ フォームでは、複数のフォームを処理する必要がある場合、複数のフォーム コントロール インスタンスを手動で作成するのは非常に面倒です。 FormBuilderサービスは、フォーム コントロールを生成するための便利なメソッドをいくつか提供します。 FormBuilderバックグラウンドで同じ方法でこれらのインスタンスを作成して返しますが、使用する方が簡単です。
FormBuilder ReactiveFormModuleによって提供される注入可能なサービス プロバイダーです。この依存関係は、コンポーネントのコンストラクターに追加するだけで注入できます。
FormBuilderサービスには、control()、group()、およびarray()という 3 つのメソッドがあります。これらのメソッドは、それぞれコンポーネント クラスでFormControl、FormGroupおよびFormArray生成するためのファクトリ メソッドです。
次の例を参照してください。 test.component.ts
import { Component } from '@angular/core';
// 1. FormBuilder をインポートする
import { FormBuilder, Validators } from '@angular/forms';
@成分（{
セレクター: 'アプリテスト',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
エクスポートクラス TestComponent {
//2。フォームビルダーサービスコンストラクター（プライベートFB：FormBuilder）{}を注入する
ngOnInit() { }
プロフィールフォーム = this.fb.group({
firstName: ['', [Validators.required, Validators.pattern('[a-zA-Z0-9]*')]],
lastName: ['', Validators.required],
});
// と同等 // profileForm = new FormGroup({
// firstName: new FormControl('', [Validators.required,Validators.pattern('[a-zA-Z0-9]*')]),
// lastName: new FormControl('', Validators.required),
// });
onSubmit() {
console.log(this.profileForm.value)
console.log(this.profileForm)
}
比較すると、
FormBuilderサービスを使用すると、毎回newインスタンスを手動で作成する必要がなく、 FormControl 、 FormGroup 、およびFormArrayより簡単に生成できることがわかります。
Validatorsクラス バリデーターの完全な API リストについては、 API マニュアルhttps://angular.cn/api/forms/Validators を参照してください。
バリデーター ( Validators ) 関数は、同期関数または非同期関数です。
FormControlインスタンス化すると、2番目のパラメーターとしてコンストラクターに渡すことができます。PromiseまたはObservableを返し、後で一連の検証エラーまたは null を生成します。これらは、 FormControlインスタンス化するときに 3 番目のパラメーターとして渡すことができます。パフォーマンス上の理由から、Angular はすべての同期バリデーターが合格するまで非同期バリデーターを実行しません。これらの検証エラーは、各非同期バリデータが実行された後に設定されます。
https://angular.cn/api/forms/Validators
クラス Validators {
static min(min:number):ValidatorFn //入力可能な最小値 static max(max:number):ValidatorFn //最大値 static required(control:AbstractControl):ValidationErrors | null //必須かどうか static rebulytrue（control：abstractcontrol）：validationErrors |
静的電子メール（コントロール：AbstractControl）：ValidationErrors |文字列|
static composeAsync(validators: AsyncValidatorFn[]): AsyncValidatorFn |
}FormControlコントロールをインスタンス化するときに
{balidators}を追加できます。
...
ngOnInit(): void {
this.heroForm = 新しい FormGroup({
// formcontrolコントロール名をインスタンス化：new formcontrol（this.hero.name、[
Validators.required, // 検証、必須 Validators.minLength(4), // 長さは 4 以上です
forbiddennamevalidator（/bob/i）//カスタムバリデーター]）、
alterEgo: 新しい FormControl(this.hero.alterEgo)、
power: 新しい FormControl(this.hero.power, Validators.required)
});
}
get name() { return this.heroForm.get('name'); }
get power() { return this.heroForm.get('power'); }カスタムバリデーターの内容については、 API マニュアルを参照してください
https://angular.cn/guide/form-validation
組み込みの場合もあります検証 プロセッサはニーズを十分に満たすことができません。たとえば、フォームを検証する必要がありますが、入力値は特定の配列の値のみであり、この配列の値はプログラムの実行中にリアルタイムで変化します。時間、内蔵のバリーターはこの要件を満たすことができず、カスタムバリーターを作成する必要があります。
レスポンシブフォームにカスタムバリデータを追加します。上記の組み込みのバリデーターセクションにはforbiddenNameValidator
「@angular/forms」からのインポート{validators}のforbiddennamevalidator機能があります。
...
ngOnInit(): void {
this.heroForm = 新しい FormGroup({
名前: 新しい FormControl(this.hero.name, [
バリデータ.必須、
Validators.minLength(4)、
// 1. カスタムバリデータを追加する
])
});
}
//2。BOB文字列エクスポート関数を使用して値の入力を禁止することとの関数がforbiddennameValidator（namere：regexp）：validatorfn {
return（control：abstractcontrol）：validationErrors |
const forbidden = namere.test（control.value）;
// 3。値が有効なときにnullを返すか、無効な場合の確認エラーオブジェクトを返します。{value：control.value}}
};
バリデーターは、
値が有効な場合は
nullを返し、無効な場合は验证错误对象返します。 認証エラーオブジェクトには、通常、認証キー（forbiddenName）と呼ばれる属性があります。その値は、エラー メッセージ ({name}) を挿入するために使用できる任意の辞書です。
テンプレート駆動型のフォームにカスタムバリデーターを追加します。テンプレートにディレクティブを追加するには、ディレクティブにはvalidator関数が含まれています。同時に、この指令は、 NG_VALIDATORSのプロバイダーとして自分自身を登録する必要があります。以下に示すように:
// 1. 関連クラスをインポートします import { NG_VALIDATORS, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
'@angular/core' から {Input} をインポートします
@指令（{
セレクター: '[appForbiddenName]',
// 2。ng_validatorsトークンプロバイダーのプロバイダーとして登録：[{riding：ng_validators、useexisting：forbiddenvalidatordirective、multi：true}]]
})
forbiddenValidAtordirectiveの輸出forbiddenvalidatordirective validator {
@input（ 'appforbiddenname'）forbiddenname = '';
// 3。バリデーターインターフェイスを実装してください。
//値が有効なときにnullまたは無効なときに検証エラーオブジェクトを返します。
：null;
}
}
// 4。カスタム検証関数のエクスポートForbiddenNameValidator（namere：regexp）：validatorfn {
return（control：abstractcontrol）：validationErrors |
const 禁止 = nameRe.test(control.value);
// 3。値が有効なときにnullを返すか、無効な場合の確認エラーオブジェクトを返します。{value：control.value}}
};
}カスタム検証指示は、
useClassの代わりにuseExistingでインスタンス化されることに注意してください。useClassがuseExisting代わりに使用される場合、新しいクラスインスタンスが登録されますが、forbiddenNameはありません。
<入力型= "テキスト"必須appforbiddenname = "bob" [（ngmodel）] = "hero.name">