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

发布此消息后不久，我找到了答案。角材料具有css类的mat-form-field-disabled。我只是使用此类并设置显示：无。如果有更清洁的方法，请发表评论。

Answer 2

两个想法：

使用基于ngif的variabel
我看到您正在使用fxLayout，实际上您可以使用fxShow="{{variable}}"隐藏或显示元素

禁用时如何隐藏垫输入

2 个答案: