Angular テンプレート駆動フォームの使用方法

今回は、Angular テンプレートを使用してフォームを駆動する方法と、Angular テンプレートを使用してフォームを駆動するときの 注意事項 について説明します。以下は実際的なケースです。見てみましょう。

ユーザー入力を取得する

<p class="container-fluid login-page">
 <h1>Angular表单</h1>
 <form class="login-area">
  <p class="form-group">
    <input class="form-control" type="text" name="name" id="login-name" placeholder="请输入登录帐号">
  </p>
  <p class="form-group">
   <input class="form-control"type="password" name="pwd" id="login-pwd" placeholder="请输入登录密码">
  </p>
  <p class="form-group">
   <button type="submit" class="btn btn-block btn-success">登录</button>
  </p>
 </form>
</p>

1) イベント $event メソッド

イベント処理 関数に渡します。この関数は、トリガーに関するさまざまな情報を伝えます。要素。ここでは、form 要素の submit イベントをリッスンし、フォーム情報全体を処理関数に渡し、それを出力します

<form class="login-area" (submit)="testInput($event)">

2) テンプレート参照変数

testInput ( _input: any) {
  console.dir(_input);
}

そのため、テンプレート参照変数を使用して入力要素を直接渡すことができます。要素情報全体を渡さずに、テンプレート内の input 要素を使用します。この方法も良くありません。イベントトリガーを介して渡す必要があります

// 模版引用变量代表Form元素
<form class="login-area" #test (submit)="testInput(test)">
// 模版引用变量代表ngForm指令
<form class="login-area" #test="ngForm"(submit)="testInput(test)">

注: テンプレート参照

の範囲はテンプレート全体であるため、同じテンプレート内に同じ名前のテンプレート参照変数は存在できませんこれら 2 つ フォーム データを取得する最初の方法は、理解することだけです。Angular には、フォームを構築するための 2 つの優れた方法、テンプレート駆動型フォームとモデル駆動型フォームが用意されているためです

その名前が示すように、 HTML テンプレートとフォーム プロフェッショナルの指示を使用してフォームを構築します。テンプレート駆動フォームを使用するには、最初に FormsModule をアプリケーション モジュールにインポートすることを忘れないでください。次の点について説明します:

1. テンプレート駆動型フォームでは、双方向の

にフォーム データをバインドするのが非常に簡単です。フォームで [ngModel] を使用する場合は、name 属性を定義する必要があることに注意してください。Angular がフォームを処理するときに、単一のフォーム コントロールの値とステータス、およびフォーム コントロールの name 属性を追跡するための FormControl が作成されるためです。はキー値であるため、name 属性を指定する必要があります。 (これは、フォーム データを取得する 2 つの科学的な方法を指摘していると見なされます: [ngModel] 構文バインディングと formControl の API を介した取得) 2. ngForm コマンドを使用して、フォーム全体 (有効な属性) の有効性を監視します。 Angular は ngForm 命令を自動的に作成してフォームに追加します。これを直接使用できます

3. ngModel 命令を使用して単一のフォーム コントロールのステータスを監視し、特定の Angular CSS を使用してコントロール スタイルを更新することもできます。これらのクラス さまざまな状態でフォーム コントロールの表示を制御するには

4. フォーム検証

は、 バリデーターをカスタマイズすることもできます。テンプレート駆動型フォームは FormControl インスタンスに直接アクセスしないため、カスタム バリデーターを命令でラップする必要があります。

次の例は、テンプレート駆動フォームの簡単な使用方法を示しています

<!-- 模版引用变量指向ngForm指令 -->
 <form class="login-area" #testform="ngForm" (submit)="testInput()">
  <p class="form-group">
    <!-- ngModel绑定数据 -->
    <!-- required 和 pattern 指定校验规则 -->
    <!-- 模版引用变量指向ngModel指令 -->
    <input class="form-control" type="text" name="name" id="login-name" placeholder="请输入登录帐号"
        [(ngModel)] = "user.name"  
        required
        pattern="[0-9A-z]+"
        #nameinput = "ngModel"
        >
  </p>
    <!-- 通过表单控件的状态控制是否展示错误说明及展示何种错误说明 -->
  <p class="form-group" *ngIf="nameinput.touched&&nameinput.invalid">
    <span class="error-info" *ngIf="nameinput.errors?.required">用户名不能为空！</span>
    <span class="error-info" *ngIf="nameinput.errors?.pattern">用户名只能包含英文或数字！</span>
  </p>
  <p class="form-group">
   <input class="form-control" type="password" name="pwd" id="login-pwd" placeholder="请输入登录密码"
       [(ngModel)] = "user.pwd"
       required
       #pwdinput = "ngModel">
  </p>
  <p class="form-group" *ngIf="pwdinput.touched&&pwdinput.invalid">
   <span class="error-info" *ngIf="pwdinput.errors?.required">密码不能为空！</span>
  </p>
  <p class="form-group">
   <!-- 通过表单的状态控制按钮是否可用 -->
   <button type="submit" class="btn btn-block btn-success" [disabled]="testform.invalid">登录</button>
  </p>
 </form>

input.ng-invalid.ng-touched{
    border: 2px solid red;
 }

如何使用vue注册组件

怎样使用Vue三层嵌套路由

以上がAngular テンプレート駆動フォームの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。