Angular 5 Dynamic Form基于之前的Form控件

时间:2018-01-24 15:12:09

标签: angular form-control

我们使用Angular 5,我们正在尝试设置一个动态表单,其中的选项显示何时Role不是Admin。我正在使用ngIf并尝试检查formcontrol for Role。我显然没有做到这一点,并开始质疑是否可以在没有调用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> 

非常感谢提前

1 个答案:

答案 0 :(得分:2)

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

由于您只包含了表单的摘录,因此我不能说这个确切的代码段肯定会有效,但您应该明白这一点。

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