Как добавить обязательную звездочку в пользовательский элемент управления? - PullRequest
Новая
       7

Как добавить обязательную звездочку в пользовательский элемент управления?

0 голосов
/ 01 июля 2018

Я использую Angular 6 для создания пользовательского компонента, который содержит пользовательский элемент управления формы. До сих пор я реализовал ControlValueAccessor в своем компоненте.

Мой пользовательский элемент управления - это простой MatSelect компонент из Angular Material. Я хочу показать звездочку (*), когда требуется этот элемент управления.

Пока что у меня есть пользовательский элемент управления, но добавление атрибута required к компоненту не добавляет звездочку в мой элемент управления! 

<app-provinces formControlName="projectProvince" required></app-provinces>

Должен ли я определить для нее переменную @Input и обработать ее вручную, или это должно быть сделано автоматически?

1 Ответ

0 голосов
/ 01 июля 2018

Да, вы должны добавить required @Input() к вашему компоненту.

Примерно так: 

<div class="form-group m-form__group row" [ngClass]="{
                    'has-danger': formGroup.controls[formControlName].invalid && formGroup.controls[formControlName].touched,
                    'has-success': formGroup.controls[formControlName].valid && formGroup.controls[formControlName].touched,
                    'has-no-action': formGroup.controls[formControlName].untouched
                                }">
        <label class="col-form-label col-lg-3 col-sm-12" [for]="formControlId">
            {{formControlLabel}}
            <span *ngIf="isRequired" class="required" aria-required="true"> * </span>
        </label>
        <div class="col-lg-4 col-md-9 col-sm-12">
            <select placeholder="place_holder_text" [disabled]="disabled" [class]="formControlName" [id]="formControlId" [data]="formControlItems"  (click)="setAsTouched()" (valueChanged)="store($event)"></select>
            <div class="form-control-feedback">{{formControlErrorText || 'Required Field May Not Be Empty'}}</div>
            <span class="m-form__help">{{formControlHelpText}}</span>
        </div>
    </div>

Компонент: 

@Input('required') isRequired: boolean;

Пример использования: 

<select-form-control
    [required]="true"
    [group]="myFormGroup"
    label="Name"
    name="name"
    controlId="name"
    [inputItems]="array"
    helpText="Enter..."
    [value]="name"
    (valueChange)="someMethod($event)">
</select-form-control>
...