ngIf 角度反应形式组件值答案

【问题标题】：ngIf an angular reactive form component valuengIf 角度反应形式组件值
【发布时间】：2020-03-11 15:48:23
【问题描述】：

我有一组单选按钮。如果用户选择值“是”，我想在表单上显示一个附加框。

https://stackblitz.com/edit/angular-4bgahw?file=src/app/personal/personal.component.ts

HTML.component

<div formGroupName="radioButtonsGroup" class="form-group col-6 pl-0 pt-3">

    <div class="form-check-inline" *ngFor="let item of personal.radioButtonsdata">
        <label for="{{item.section}}" class="col-12 customradio"
            ><span>{{item.section}}</span>
            <input [value]="item" id="{{item.section}}" type="radio" formControlName="selectedButton"/>
            <span class="checkmark"></span>
        </label>
    </div>

    <!-- <div class="col-md-8" *ngIf="selectedButton.control.item === 'yes'"> --> //my attempt to target above input value
  <div class="col-md-8" >
        <input type="text" formControlName="title" class="form-control" placeholder="Title">
</div>
    </div>

任何人都可以让它工作并告诉我我在这里做错了什么吗？

【问题讨论】：

标签： javascript angular typescript angular-reactive-forms

【解决方案1】：

您在模板中编写的所有内容都针对相应的类（或模板变量）进行解析，因此您必须像这样引用 JavaScript 控件：

*ngIf="form.controls['selectedButton'].value === 'yes'"

【讨论】：

那是响应式表单，不是模板驱动的表单，所以控件在 TypeScript 中
这不是你花园里的石头）只是观察

【解决方案2】：

调用函数以根据单选按钮的值设置标志，(ngModelChange)="onRadiochange($event)"

试试这样：

Working Demo

.html

<input [value]="item" (ngModelChange)="onRadiochange($event)" id="{{item.section}}" type="radio" formControlName="selectedButton" />

<div class="col-md-8" *ngIf="showTitle">
        <input type="text" formControlName="title"   class="form-control" placeholder="Title">
</div>

.ts

  onRadiochange(e) {
    if(e.section == 'yes'){
      this.showTitle = true
    } else {
      this.showTitle = false
    }
  }

也可以像这样在一行中完成：

<input [value]="item" (ngModelChange)="$event.section == 'yes' ? showTitle=true:showTitle=false" id="{{item.section}}" type="radio" formControlName="selectedButton" />

【讨论】：

【解决方案3】：

需要访问表单控件的值：

*ngIf="form.get('radioButtonsGroup.selectedButton').value.section === 'yes'">

STACKBLITZ

【讨论】：

在 Angular 8 中这不起作用。我们需要修改如下，*ngIf="radioButtonGroup.get("selectedButton").value === "yes"
@Pinka 是的，这就是您获取具有 primitive 值的表单控件的值的方式，但 OP 具有 OBJECT 值的表单控件，其中包含一个名为“section”的属性，因此在这种情况下我们需要深入挖掘嵌套对象。

【解决方案4】：

当yes复选框被选中时，您必须显示标题文本框。
在这种情况下，请像这样更改您的代码。

在 personal.component.ts 中，添加此变量。

yesSelected: boolean = true;

同样在 ngOnInit() 中，

this.form.valueChanges.subscribe(val=>{
      if(val.radioButtonsGroup.selectedButton.section === "yes") 
         this.yesSelected = true;
      else 
         this.yesSelected = false;
});

在 personal.component.html 中，像这样重写你的 if 条件。

<div class="col-md-8" *ngIf="yesSelected">
      <input type="text" formControlName="title" placeholder="Title">
</div>

这些更改仅在选中“是”复选框时才会显示标题文本框。

【讨论】：