角度自定义指令Css

我在尝试创建角度自定义指令时遇到了一些问题。这是我的html代码:

 <div class="col-12 col-md-6 col-lg-6">              
    <label [hidden]="!initservicesService.invoiceCurrencyLblVisible" for="">Invoice Currency</label>
       <select class="form-control" name="currencyCd" [hidden]="!initservicesService.invoiceCurrencyComboBoxVisible" [(ngModel)]="billProfileDO.currencyCd" id="" [disabled]="initservicesService.invoiceCurrencyComboBoxEnabled" [required]="initservicesService.invoiceCurrencyComboBoxCompulsory"                     (ngModelChange)="invoiceCurrencyComboBox_valueChanged($event)">
            <option *ngFor="let item of invoiceCurrencyList" value="{{item.cdValue}}">{{item.decodeValue}}</option>
        </select>
</div>

然后,在我的“required”指令类中,我尝试将“*”添加到每个required属性的标签中:

import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
    selector: '[required]'
})
export class RequiredDirective {
    constructor(public el: ElementRef) {
        this.el = el;
    }
    // tslint:disable-next-line: use-life-cycle-interface
    ngOnInit() {
        this.formRequiredFunctions();
    }

    public formRequiredFunctions() {
        const that = this.el.nativeElement;
        console.log(that)
        const className: any = this.el.nativeElement.className;
        if (className === 'form-control') {
            $(that)
                .prev('label')
                .after('<span class="required"> *</span>');
            $(that)
                .prev('.form-tooltip')
                .prev('label')
                .after('<span class="required"> *</span>');
            $(that)
                .parent('.input-group')
                .prev('label')
                .after('<span class="required"> *</span>');
        } 
    }
}

但是,问题是,对于那些具有“required”和“hidden”属性的字段,“*”仍在显示,因此它不应该显示。有什么想法吗?

谢谢!