当扩展面板具有输入字段并且在Angular中具有空值时，如何验证扩展面板标题突出显示

Question

在尝试在Angular 7中创建扩展面板时，我遇到了一个小问题。在扩展面板标题部分中，当扩展面板输入字段中有数据时，字体颜色应更改，必须更改为绿色，如果输入字段为空，则面板标题应为红色。我为此做了尝试，但没有得到，您能帮我吗？

感谢与问候

<form [formGroup]="formGroup2">
<mat-expansion-panel [expanded]="step === 0"(opened)="setStep(0)"hideToggle>
 <mat-expansion-panel-header>
   <i class="material-icons">arrow_right_alt</i>Call Volumes
    </mat-expansion-panel-header>      
    <mat-card>
    <mat-card-content>
        <mat-form-field style="width: 300px; padding: 10px;" class="example-full-width">
          <input matInput placeholder="Calls / Volumes / Transaction per month" formControlName="secondCtrl" required>
        </mat-form-field>  
        <mat-form-field style="width: 350px; padding: 10px;">
          <input matInput placeholder="AHT Per call / volume / transaction in Seconds" formControlName="eighthCtrl" required>
        </mat-form-field>
    </mat-card-content>
    </mat-card>  
    <mat-action-row>
    <button mat-button color="primary" (click)="nextStep()">Next</button>
    </mat-action-row>
    </mat-expansion-panel>
</form>

这是app.component.ts代码

formGroup2: FormGroup;

constructor(private _formBuilder: FormBuilder ) {}

ngOnInit() {
    this.formGroup2 = this._formBuilder.group({
    eighthCtrl: ['', Validators.required],
});