使用Angular的响应式表单，根据输入内容来动态改变表单的显示

概述

我在Angular中尝试动态添加表单输入字段以及根据输入内容切换输入字段的显示。

前提的参考网站

首先，请参考Reactive Forms的文档。此外，Angular的Form（Reactive Forms）的备忘录博客文章对Reactive Forms进行了简洁明了的总结，非常易懂。

样本源

我将在下面提供一个示例，根据在一个文本框中输入的内容切换另一个文本的显示。我对上述参考网站的内容进行了一些编辑，确保在Angular5上运行。

模块的设置 de

import { NgModule }      from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule }  from '@angular/forms';

@NgModule({
  imports:[ CommonModule ,FormsModule , ReactiveFormsModule ]
})
export class TestModule { }

組件

import { Component, OnInit} from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

@Component({
  template: `   
    <form [formGroup]="testFormGroup">
        <div formArrayName="testlist">
           <div *ngFor="let test of testlist.controls; let i=index" [formGroupName]="i">
                City1:<input type="text" formControlName="city1" /><br/>
                <span *ngIf="test.get('city1').value == 'aaa'">
                    City2:<input type="text" formControlName="city2" />
                </span>
            </div>
         </div>
         <input type ="button"  (click)="addInput()" value="入力欄を追加" />
     </form>
  `
})
export class TestReactiveFormsComponent  { 

    // 計算式のフォームグループ
    testFormGroup: FormGroup;

    constructor(private fb: FormBuilder) {
             // フォームグループ初期化
             this.testFormGroup = this.fb.group({
                 testlist: this.fb.array([]),
             });
    }

    // 追加ボタンが押されたとき
    addInput() {
       this.testlist.push(this.fb.group({ city1: 'test1',city2: 'test2'}));
    }

    // リストの取得用
    get testlist(): FormArray {
        return this.testFormGroup.get('testlist') as FormArray;
    };

}

画面的形象