Angularでフォームコントロールを追加する方法

1. フォームコントロールの追加: Angularでは、フォームコントロールを作成するためにFormControlクラスを使用します。以下のコードは、フォームコントロールを作成する方法を示しています。

   import { Component } from '@angular/core';
   import { FormControl } from '@angular/forms';
   @Component({
    selector: 'app-form',
    template: `
      <input type="text" [formControl]="myFormControl">
    `
   })
   export class MyFormComponent {
    myFormControl = new FormControl();
   }

   上記の例では、FormControlクラスのインスタンスをmyFormControlという名前のプロパティに割り当てています。その後、[formControl]ディレクティブを使用して、フォームコントロールをテンプレートの要素にバインドしています。

2. バリデーションの追加: フォームコントロールには、バリデーションルールを追加することもできます。以下の例では、Validatorsクラスを使用して、必須フィールドと最小長さのルールを追加しています。

   import { Component } from '@angular/core';
   import { FormControl, Validators } from '@angular/forms';
   @Component({
    selector: 'app-form',
    template: `
      <input type="text" [formControl]="myFormControl">
      <div *ngIf="myFormControl.invalid && (myFormControl.dirty || myFormControl.touched)">
        <div *ngIf="myFormControl.errors.required">入力してください。</div>
        <div *ngIf="myFormControl.errors.minlength">最低{{ myFormControl.errors.minlength.requiredLength }}文字必要です。</div>
      </div>
    `
   })
   export class MyFormComponent {
    myFormControl = new FormControl('', [
      Validators.required,
      Validators.minLength(5)
    ]);
   }

   上記の例では、FormControlのコンストラクタにバリデータを渡しています。テンプレート内では、*ngIfディレクティブを使用して、フォームコントロールのバリデーションエラーが表示される条件を指定しています。

これらのコード例をベースに、自分のアプリケーションに合わせてフォームコントロールを追加し、カスタマイズすることができます。また、Angularの公式ドキュメントにはさらに詳細な情報が提供されているため、参考にすることをおすすめします。