export class AppComponent implements OnInit {
  name = 'Angular ' + VERSION.major;
  formGroup = new FormGroup({});
  // 學(xué)號
  studentNoFormControl = new FormControl(null, Validators.required);
  // 工號
  teachterNoFormControl = new FormControl(null, Validators.required);
  // 用戶類型
  typeFormControl = new FormControl(null, Validators.required);
  ngOnInit(): void {
    this.formGroup.addControl('name', new FormControl('', Validators.required));
    this.formGroup.addControl('type', this.typeFormControl);

    // 訂閱類型的變化，從而決定在formGroup中添加學(xué)號還是工號FormControl
    this.typeFormControl.valueChanges.subscribe((type) => {
      if (type === 0) {
        this.formGroup.removeControl('studentNo');
        this.formGroup.addControl('teacherNo', this.teachterNoFormControl);
      } else {
        this.formGroup.removeControl('teacherNo');
        this.formGroup.addControl('studentNo', this.studentNoFormControl);
      }
    });

    // 初始化用戶類型為教師
    this.typeFormControl.setValue(0);
  }

  onSubmit(): void {
    alert('submit');
  }

  /**
   * 顯示學(xué)號或是工號的input
   */
  showStudent(): boolean {
    return this.typeFormControl.value === 1;
  }
}

<hello name="{{ name }}"></hello>
<p>表單動態(tài)驗證示例</p>
<pre>{{ formGroup.invalid | json }}</pre>
<pre>{{ formGroup.get('type').value | json }}</pre>
<form [formGroup]="formGroup">
  <div>姓名：<input type="text" formControlName="name" /></div>
  <div>
    用戶類型:
    <label
      ><input type="radio" [value]="0" formControlName="type" name="type" />
      教師</label
    >
    <label
      ><input type="radio" [value]="1" formControlName="type" name="type" />
      學(xué)生</label
    >
  </div>
  <div *ngIf="showStudent()">
    學(xué)號：<input type="text" formControlName="studentNo" />
  </div>
  <div *ngIf="!showStudent()">
    工號：<input type="text" formControlName="teacherNo" />
  </div>
  <button [disabled]="formGroup.invalid" (click)="onSubmit()">Submit</button>
</form>