Angular 根据所选选项显示字段-反应式表单

我试图显示一个基于所选选项“usa”的字段。我正在创建动态反应表单字段，但无法根据所选选项显示和隐藏字段。这就是我所尝试的

AppComponent html：

<form [formGroup]="myForm">
  <div
    formArrayName="formArray"
    *ngFor="let formArr of myForm.get('formArray').controls; let i = index"
  >
    <div [formGroupName]="i" style="margin-bottom: 10px;">
      <label for="name"> First name Name:</label>
          <input  formControlName="firstName"  placeholder="First name">
<label for="name">Last name :</label>
          <input   formControlName="lastName"  placeholder="Last name">

          <select formControlName="countries" [(ngModel)]="selectCountry" (ngModelChange)="onChange($event)" >
      <option *ngFor="let c of countries" [ngValue]="c"> {{c.name}} </option>
    </select>
        <div *ngIf="showPostcode">
              <label for="name"> Post Code </label>
          <input  formControlName="postcode"  placeholder="Post code"> // this field what i'm trying to show or hide
          </div>

      </div>
      <button (click)="addForm()">Add new form</button>
      <br /><br />
    </div>
  </div>
  <button (click)="SubmitApp()">Button</button>

  <br />
  <br />
  <div style="border-style: dashed;"></div>
</form>

请记住，我可以使用“添加新字段按钮”创建多个字段吗。我需要帮助

简短的回答。使用：

<div *ngIf="formArr.get('countries').value=='usa'">

使用表单数组时，可以执行以下操作

myForm.get('formArray').at(i).get('countries')

好的，当我们使用FormArray时，实际上你不能这样做——如果你做一个ng构建——prod给你一个错误——使用getter来获取数组的值

get myArray()
{
    return this.myForm.get('formArray') as FormArray
}

你重复了一遍

<div formArrayName="formArray">
    <div *ngFor="let formArr of myArray.controls; let i = index"
         [formGroupName]="i" style="margin-bottom: 10px;"  >
         ....
    </div>
<div >

但是您可以使用迭代变量，是的，“let formArr of…”的变量formArr是一个formGroup，因此您可以使用

formArr.get('countries').value

嗯，别那么快，你用

。这意味着myArray.at（i）.get（'countries'）的值是“整个”对象“c”-我支持您想说的

[ngValue]=“c.name”

或“c.ISOName”或类似的值

<div formArrayName="formArray">
    <div *ngFor="let formArr of myArray.controls; let i = index"
         [formGroupName]="i" style="margin-bottom: 10px;"  >
         ....
    </div>
<div >

myArray.at(i).get('countries').value

formArr.get('countries').value