Angular 5个基于以前的Form控件的Dynamic Form

Question

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

非常感谢

Answer 1

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

由于您只包含了表格的摘录，我不能说这个确切的片段一定会起作用，但您应该明白了。

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

Angular 5个基于以前的Form控件的Dynamic Form

Angular 5 Dynamic Form based on a previous Form control

angular

form-control