Угловая таможенная директива Css - PullRequest
Новая
       11

Угловая таможенная директива Css

0 голосов
/ 02 июля 2019

У меня были некоторые проблемы при попытке создать пользовательскую директиву в Angular. Вот мой 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» директивы я пытаюсь добавить «*» к метке для каждого из обязательных свойств: 

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» символ «*» все еще показывает, из-за чего он не должен отображаться. Есть идеи?

Спасибо!

1 Ответ

0 голосов
/ 02 июля 2019

Вам не нужно создавать пользовательскую директиву для required, так как Angular это уже охватило (см. здесь ). Используйте это вместе с ngIf директива (см. здесь ) для отображения «*» на этикетке. 

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