Question

我正在尝试显示基于选定选项“美国”的字段。我正在创建动态反应式表单字段，但无法根据所选选项显示和隐藏字段。这是我尝试过的。

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>

ts：

export class AppComponent implements OnInit {
showPostcode = false;
    constructor(private fb: FormBuilder) { }


  ngOnInit() {
    this.myForm = this.fb.group({
      formArray: this.fb.array([this.createItem()]),
    });
  }

createItem() {
    return this.fb.group({
      firstName: [""],
      lastName: [""],
      countries: [""],
      postcode:[""]
    });
  }


  addForm() {
    this.formArray = this.myForm.get("arr") as FormArray;
    this.formArray.push(this.createItem());
  }


onChange(country)
{
if(country.name == "usa")
this.showPostcode = true;
}

}

P.s：请记住，我可以使用“添加新字段按钮”创建多个字段。请帮忙。

Answer 1

简短答案。使用：

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

但是让我尝试解释一下：

首先，David在使用formControlName的输入中不要使用[ngModel]或（ngModelChange）。如果要访问formControl的值，请使用这些方法来获取formControl的值。

那么，如何获取此值？一般来说，我们使用的方式是

nameMyform.get('nameOfControl').value

使用Form数组时，您可以做类似

的操作

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

好吧，实际上，您不能执行此操作-如果您执行ng build --prod会给您一个错误-当我们使用FormArray时，请使用getter获取array的值

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 >

（请参阅我迭代的“ div”是formGroup的“ div”，而不是formArrayName =

的div

并使用

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

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

formArr.get('countries').value

嗯，不是那么快，而是使用<option *ngFor="let c of countries" [ngValue]="c">。这意味着myArray.at（i）.get（'countries'）的值是“整个”对象“ c”-我想说的是[ngValue]="c.name"或“ c.ISOName”或类似的名称

显示基于选定选项的字段-反应形式

1 个答案: