Angular 5 Dynamic Form 基于以前的 Form 控件答案

【问题标题】：Angular 5 Dynamic Form based on a previous Form controlAngular 5 Dynamic Form 基于以前的 Form 控件
【发布时间】：2018-01-24 23:21:22
【问题描述】：

我们使用 Angular 5，并且正在尝试设置一个动态表单，其中包含在角色不是管理员时显示的选项。我正在使用 ngIf 并且还尝试检查表单控件的角色。我显然没有这样做，并开始质疑是否可以在不调用 ts 文件中的方法为组件设置变量的情况下完成此操作。

下面是表格的摘录...

<div class="form-group">
            <span>Role*</span>
            <select class="form-control" formControlName="role" id="Role">
                <option *ngFor="let role of roles" [ngValue]="role">
                    {{role.Description}}
                </option>
            </select>
        </div>
        <div *ngIf="addUserFrm.controls.role.Description != 'Admin'" class="form-group">
            <span>Centre*</span>
            <select class="form-control" formControlName="centre" id="Centre">
                <option *ngFor="let centre of centres" [ngValue]="centre">
                    {{centre.Description}}
                </option>
            </select>
        </div>
        <div class="form-group" *ngIf="addUserFrm.controls.role.Description != 'Admin'">
            <span>Infrastructure*</span>
            <select class="form-control" formControlName="infrastructure" id="Infrastructure">
                <option *ngFor="let infrastructure of infrastructures" [ngValue]="infrastructure">
                    {{infrastructure.Description}}
                </option>
            </select>
        </div>

提前多谢

【问题讨论】：

标签： angular form-control

【解决方案1】：

您可以使用get(path: Array<string | number> | string): AbstractControl | null;，或更易读的formGroupName.get('formControlName') 函数来获取动态表单中的表单控件。

由于您只包含了表单的摘录，我不能说这个确切的 sn-p 肯定会起作用，但您应该明白这一点。

<div *ngIf="addUserFrm.get('role').value.Description != 'Admin'" class="form-group">

【讨论】：