ngIf 角反应形式分量值

Question

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

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>

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

Answer 1

您需要访问表单控件的值：

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

堆栈闪电战

Answer 2

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

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