表单域的条件显示 Ionic Angular答案

【问题标题】：Conditional display of form fields Ionic Angular表单域的条件显示 Ionic Angular
【发布时间】：2021-01-31 05:28:40
【问题描述】：

我目前正在使用 Ionic Angular 开发应用程序。我想让用户选择一个选项，并基于该选项，我希望他/她看到一个特定的表单字段。例如，在 Google Forms 或 Microsoft Forms 中，我可以选择某些内容，然后弹出与我选择的内容相关的问题，我该怎么做？我已经完成了表单验证，但我想看看如何进行表单字段的条件显示。

【问题讨论】：

看*ngIf

标签： angular forms validation conditional-statements ionic5

【解决方案1】：

很简单！ Angular Reactive forms 是一种在 Angular 中使用表单和表单验证的高级方法。你可以这样做：

// In your component.ts file, you can define a formGroup and formControls like this

someFormGroup = new FormGroup({

  formControl1: new FormControl('', [Validators.required]),
  formControl2: new FormControl('', [Validators.required]),
  formControl3: new FormControl('', [Validators.required]),
})


// In your HTML file, you can define like this.

<div [formGroup]="someFormGroup">
   <input type="radio" name="formContol1" formControlName="formControl1" placeholder="Select any option"/>

// to check the value and display formfields, you need to do this

   <div *ngIf="someFormGroup.get('formControl1).value === true">
      /// Some HTML content
   </div>

   <div *ngIf="someFormGroup.get('formControl1).value !== true">
      /// Some other HTML content
   </div>
</div>

【讨论】：