angular#3

リアクティブフォームとテンプレート駆動フォーム

・リアクティブフォーム

　コンポーネントにあらかじめFormGroup、FormControlを作成する。
　テンプレート側はそれらのオブジェクトを参照して利用する。
　テンプレートは↓のイメージ 

<form [formGroup]="calcForm">
  <mat-form-field class="example-full-width" appearance="fill">
    <mat-label>数値</mat-label>
    <input matInput placeholder="100" formControlName="num1">
  </mat-form-field>
  +
  <mat-form-field class="example-full-width" appearance="fill">
    <mat-label>数値</mat-label>
    <input matInput placeholder="200" formControlName="num2">
  </mat-form-field>
  <button mat-raised-button color="primary" (click)="Calc()">計算</button>
  <div>
    <mat-label>計算結果＝{{ret}}</mat-label>
  </div>
</form>

　コンポーネントは↓のイメージ

export class BetterFromComponent implements OnInit {

  // Form関連
  calcForm:FormGroup = new FormGroup(
  {
    "num1": new FormControl(0),
    "num2": new FormControl(0),
  });
  ret:string = "";

  constructor() { }

  ngOnInit(): void {
  }

・テンプレート駆動フォーム

　テンプレートのHTML側テキストボックスや入力エリアに属性を付与してそれに対するFormGroupやFormControlがオブジェクトとして設定される。
　テンプレートは↓のイメージ

<form class="example-form">
  <mat-form-field class="example-full-width" appearance="fill">
    <mat-label>数値</mat-label>
    <input matInput placeholder="100" name="num1" [(ngModel)]="num1">
  </mat-form-field>
  +
  <mat-form-field class="example-full-width" appearance="fill">
    <mat-label>数値</mat-label>
    <input matInput placeholder="200" name="num2" [(ngModel)]="num2">
  </mat-form-field>
  <button mat-raised-button color="primary" (click)="Calc()">計算</button>
  <div>
    <mat-label>計算結果＝{{ret}}</mat-label>
  </div>
</form>

コンポーネント側は↓のイメージ

export class TemplateFromComponent implements OnInit {
  ret:string;
  num1:string;
  num2:string;
  num:string;
  name:string = "koga";

  constructor() { 
    this.ret = "0";
    this.num1 = "";
    this.num2 = "";
    this.num = "111111";
  }

上記についてまだメリットデメリットはしっくり来ていないが、リアクティブフォームのほうが、入力データの複雑な処理、制御ができるとのこと。

angularの技術力が上がれば利点にも気づくということにしておこう。
や実践してみれば技術力は付く！精神。