Angularは、テンプレート駆動型と反応的なフォームの2つのアプローチを使用して、フォームの作成と検証を簡素化します。テンプレート駆動型フォームは、迅速でシンプルなフォームに最適ですが、リアクティブフォームは複雑なシナリオをより強力に制御できます。 この記事では、実用的な例で両方の方法を示しています

重要な概念：

• Angular's Form Strategies：テンプレート駆動型のフォームを簡単に速く、複雑で高度に制御された形式のための反応的なフォーム。
ブートストラップ統(tǒng)合：
• ブートストラップでスタイリングを合理化し、広範(fàn)なカスタマイズなしで視覚的な魅力を強化します。 ビルトイン検証：
Angularのバリデーター（例：
• 、）をテンプレート（テンプレート駆動）またはインスタンス化（反応型）內(nèi)で直接使用します。 requiredminlengthフォームの提出処理：FormControlイベントを効率的なデータキャプチャと処理のためのコンポーネントメソッドにバインドします。
• ダイナミックフォーム管理：動的入力と検証調(diào)整のためにAngularのフォーム制御機能を使用し、レスポンシブユーザーエクスペリエンスを作成します。 ngSubmit
• 前提條件：
Angularの基本的な理解が役立ちます。 厳密には必要ありませんが、JavaScriptとAngular Frameworkに精通していると、理解が向上します。 Angularをより深く掘り下げるには、Angularを使用したCrudアプリの構(gòu)築に関するSitePoint Articleシリーズのようなリソースを検討してください。

セットアップ：

このチュートリアルでは、スタイリングにブートストラップを使用しています。 統(tǒng)合する方法は次のとおりです

インストールBootstrap：プロジェクトのディレクトリで、実行

。

1. Angular CLIを構(gòu)成： npm install bootstrap@next

2. Import formsmodule：で、angular.json：

   から

   "styles": [
     "../node_modules/bootstrap/dist/css/bootstrap.css"
   ]

   をインポートします

3. テンプレート駆動型のフォーム：app.module.tsFormsModule @angular/forms迅速な會社の登録フォームの場合、基本フォームから始めてくださいタグ：

   import { FormsModule } from '@angular/forms';
   
   @NgModule({
     imports: [
       BrowserModule,
       FormsModule,
       // ... other imports
     ]
   })

テンプレートリファレンス変數(shù)を作成するための

の使用と、フォームの送信をコンポーネントメソッドにバインドすることに注意してください。

屬性は、フォームが有効になるまでボタンが非アクティブであることを保証します。 フォーム入力と検証の作成：

會社名の入力フィールドの場合：

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.css"
]

これは、雙方向のデータバインディング、

およびngModelのバリデーター、およびrequiredおよびminlength。 companyName.touched同様のアプローチは、業(yè)界向けのドロップダウンなど、他のフォームフィールドに適用されます。 コンポーネントのタイプスクリプトは、業(yè)界のオプションを定義します companyName.errors

コンポーネントの

メソッド：

submitCompany反応的なフォーム：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    // ... other imports
  ]
})

より複雑なアカウント登録フォームの場合、リアクティブフォームはより大きな制御を提供します。 Import ReactiveFormSmodule：

で、

コンポーネントにフォームコントロールを作成：app.module.ts ReactiveFormsModule テンプレートの@angular/forms

フォーム：

<form #companyForm="ngForm" (ngSubmit)="submitCompany(companyForm.value)">
  <!-- Form fields here -->
  <button class="btn btn-primary" type="submit" [disabled]="!companyForm.valid">Submit</button>
</form>

フォーム入力フィールド：

エラー処理はテンプレート駆動型のフォームに似ていますが、

<input type="text" class="form-control" name="companyName" ngModel #companyName="ngModel" required minlength="3">
<div *ngIf="companyName.touched && companyName.errors">
  <div class="alert alert-danger" *ngIf="companyName.errors.required">Company name is required</div>
  <div class="alert alert-danger" *ngIf="companyName.errors.minlength">Company name must be at least {{ companyName.errors.minlength.requiredLength }} characters long</div>
</div>

などを使用します。カスタムバリデーターとサービスを使用して非同期検証を追加できます。

特定のフォームフィールドと要件に合わせてコードスニペットを調(diào)整することを忘れないでください。 この詳細な説明は、Angularでシンプルな形と複雑なフォームの両方を構(gòu)築するための強固な基盤を提供します。

以上がシンプルでありながら強力な角度形態(tài)をすばやく作成しますの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。