Angular のフォームに関する知識を共有する

この記事では、Angular フォームに関連するいくつかの知識ポイントを共有します。一定の参考値があるので、困っている友達が参考になれば幸いです。

関連チュートリアルの推奨事項: 「angularjs ビデオ チュートリアル」

入力ボックスをクリックしてすべてのコンテンツを選択します

<input>

入力ボックスをクリックして内容をクリアします

<input>

イベントを通じて入力ボックスの値を取得します

(<htmlinputelement>event.target).value</htmlinputelement>

value と ngValue

[value]="..." 仅支持字符串值
[ngValue]="..." 支持任何类型

一般的に使用される正規表現

取值范围20-360：^(([2-9][0-9])|([1-2][0-9][0-9])|([3][0-5][0-9]))$|^[3][6][0]$
整数：^-?d+$
浮点数:^(-?d+)(.d+)?$
正浮点数：^(([0-9]+.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*.[0-9]+)|([0-9]*[1-9][0-9]*))$
负浮点数 ^(-(([0-9]+.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*.[0-9]+)|([0-9]*[1-9][0-9]*)))$
非负浮点数（正浮点数 + 0）：^d+(.d+)?$
非正浮点数（负浮点数 + 0） ^((-d+(.d+)?)|(0+(.0+)?))$

ngForm について

import {Component} from '@angular/core';
import {NgForm} from '@angular/forms';

@Component({
  selector: 'example-app',
  template: `
    

      <input>       <input>       Submit     

    

First name value: {{ first.value }}

    

First name valid: {{ first.valid }}

    

Form value: {{ f.value | json }}

    

Form valid: {{ f.valid }}

  `, }) export class SimpleFormComp {   onSubmit(f: NgForm) {     console.log(f.value);  // { first: '', last: '' }     console.log(f.valid);  // false   } }

• #first="ngModel" NgModel を first という名前のローカル変数にエクスポートします。 NgModel は、制御する FormControl インスタンスのプロパティをマップするため、テンプレート内のコントロールのステータス (有効、ダーティなど) を確認できます。
• Use ngModel&lt;input&gt; タグを追加すると、システムはこのタグの <code>FormControl というオブジェクトを自動的に作成し、それを FormGroup に自動的に追加します。 FormControl は、FomGroup の <input> タグの name 属性によって識別されるため、## を追加する必要があります。 name 属性。

HTML5 の新しい入力タイプ

import { Component, OnInit } from '@angular/core';
import {Data} from "popper.js";
@Component({
  selector: 'app-test-data',
 template: `
 
 test-data works! 
 <input>{{date}}

 <input>{{month}}

 <input>{{week}}

 <input>{{time}}

 <input>{{datetimeLocal}}
 <input> 
  `,
 styles: [
  ]
})
export class TestDataComponent implements OnInit {
 date:string;
 month:string;
 week:string;
 time:string;
 datetimeLocal:string;
 constructor() { }
  ngOnInit(): void {
  }
}

keyup イベントと input イベントの違い

フロントエンドで再現性検証を行う keyup イベントを判定に使用する場合, 既存のデータを入力し、同時にマウスをクリックした場合、再現性チェックは無効になります。

ngif に関する小さな問題

ngif は、入力コンテンツが表示されるかどうかを制御します。#binding を使用して有効性を検証する方法はありませんが、hidden を使用して同様の機能を実現できます

501

バックエンドがフロントエンドに値を返さない場合、フロントエンドは 501 エラーを報告します

プログラミング関連の知識の詳細については、以下を参照してください。

プログラミングビデオコース! ！

以上がAngular のフォームに関する知識を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。