禁用时如何隐藏垫输入答案

【问题标题】：How to hide mat-input when disabled禁用时如何隐藏垫输入
【发布时间】：2018-11-02 18:11:16
【问题描述】：

我有一个 Angular 反应形式。我根据另一个控件的值将某些控件设置为禁用。我想在控件设置为禁用时隐藏它们。我假设这需要在 CSS 中完成，但不知道该怎么做。

            <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="1em">
                <mat-form-field [floatLabel]="floatLabel" fxFlex>
                    <mat-label>{{'audio.questions.Q1' | translate}}</mat-label>
                    <mat-select formControlName="q1">
                        <mat-option *ngFor="let r of responses" [value]="r.abbreviation">
                            {{r.type}}
                        </mat-option>
                    </mat-select>
                    <mat-error *ngIf="q1.hasError('required')">
                        {{'audio.questions.ResponseRequired' | translate}}
                    </mat-error>
                </mat-form-field>                    
            </div>
            <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="1em">
                <mat-form-field [floatLabel]="floatLabel" fxFlex>
                    <mat-label>{{'audio.questions.Q1_Ear' | translate}}</mat-label>
                    <mat-select formControlName="q1_ear">
                        <mat-option *ngFor="let e of ears" [value]="e.abbreviation">
                            {{e.type}}
                        </mat-option>
                    </mat-select>
                    <mat-error *ngIf="q1_ear.hasError('required')">
                        {{'audio.questions.ResponseRequired' | translate}}
                    </mat-error>
                </mat-form-field>
            </div>

private buildForm() {
    this.audioQuestionsForm = this.formBuilder.group({
        q1: ['', [Validators.required]],
        q1_ear: [{ value: '', disabled: true }],
        q2: ['', [Validators.required]],
        q2_often: [{ value: '', disabled: true }],
        q3: ['', [Validators.required]],
        q3_when: [{ value: '', disabled: true}],
        q3_last: [{ value: '', disabled: true}],
        q3_freq: [{ value: '', disabled: true}],
        q4: ['', [Validators.required]],
        q4_desc: [{ value: '', disabled: true}],
        q5: ['', [Validators.required]],
        q5_gun: '',
        q5_rpy: '',
        q5_total: ''
    });
}

private setConditionalValidation() {
    this.audioQuestionsForm.get('q1').valueChanges.subscribe(
        (q1: string) => {
            this.audioQuestionsForm.get('q1_ear').clearValidators();
            this.audioQuestionsForm.get('q1_ear').disable();
            if (q1 === "Y") {
                this.audioQuestionsForm.get('q1_ear').setValidators([Validators.required]);
                this.audioQuestionsForm.get('q1_ear').enable();
            } 
            this.audioQuestionsForm.get('q1_ear').updateValueAndValidity({emitEvent: false});
        }
    )
}

【问题讨论】：

标签： html css angular angular-material

【解决方案1】：

我在发布后不久就找到了答案。 Angular 材质有一个 CSS 类 mat-form-field-disabled。我刚刚使用了这个类并设置了显示：无。如果有更清洁的方法，请发表评论。

【讨论】：

【解决方案2】：

两个想法：

基于变量使用ngif
我看到你在使用 fxLayout，你实际上可以使用fxShow="{{variable}}" 来隐藏或显示元素

【讨论】：

我实际上想避免在这种形式的每个问题中使用单独的变量，这就是为什么我避免使用想法 #1。我实际上不知道 fxShow，所以感谢您提供的信息！由于我必须对每个问题使用值更改来决定是否需要显示它们各自的子问题，因此我想采用一种从后端控制前端的方式。在 .ts 文件中，我只是从表单中获取控件并将其设置为 .disabled 或 .enabled 并使用 .mat-form-field-disabled 控制可见性。