Как скрыть мат-ввод при отключении

Question

У меня угловатая реактивная форма. Я устанавливаю определенные элементы управления как отключенные на основе значения другого элемента управления. Я хотел бы скрыть элементы управления, когда они отключены. Я предполагаю, что это должно быть сделано в 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>

TS

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});
        }
    )
}

Answer 1

Две идеи:

1. с использованием ngif на основе переменной
2. Я вижу, что вы используете fxLayout, вы можете использовать fxShow="{{variable}}", чтобы скрыть или показать элемент

Answer 2

Я нашел ответ вскоре после публикации. Угловой материал имеет класс css class mat-field-field-disabled. Я просто использовал этот класс и установил отображение: нет. Если есть более чистый способ, пожалуйста, прокомментируйте.