フォームコントロールの値を取得する

Angularでフォームをセットアップしたら、次のステップはフォームコントロールから値にアクセスすることです。

このアクティビティでは、フォーム入力から値を取得する方法を学びます。

1. テンプレートに入力フィールドの値を表示する

   テンプレートに入力値を表示するには、コンポーネントの他のクラスプロパティと同様に、補間構文 {{}} を使用できます。

         
   @Component({  selector: 'app-user',  template: `    ...    <p>フレームワーク: {{ favoriteFramework }}</p>    <label for="framework">      お気に入りのフレームワーク:      <input id="framework" type="text" [(ngModel)]="favoriteFramework" />    </label>  `,})export class UserComponent {  favoriteFramework = '';}
       

2. 入力フィールドの値を取得する

   コンポーネントクラスで入力フィールド値を参照する必要がある場合は、this 構文を使用してクラスプロパティにアクセスできます。

         
   ...@Component({  selector: 'app-user',  template: `    ...    <button (click)="showFramework()">フレームワークを表示</button>  `,  ...})export class UserComponent {  favoriteFramework = '';  ...  showFramework() {    alert(this.favoriteFramework);  }}
       

テンプレートに入力値を表示し、プログラムでアクセスする方法を学ぶことができました。

Angularを使用したフォーム管理の次の方法、リアクティブフォームに進む時が来ました。テンプレート駆動フォームの詳細については、Angular フォームドキュメント を参照してください。