Угловой дочерний компонент ng-invalid - PullRequest
0 голосов
/ 29 июня 2018

Я создаю пользовательский компонент ввода, совместимый с формами, реализуя ControlValueAccessor. Этот входной компонент представляет собой композицию из одного или нескольких дочерних входов, но у меня возникают проблемы при получении CSS-класса ng-invalid для распространения на дочерний элемент input.

Мой компонент ввода имеет такой шаблон:

<label>Input:</label> <input type="text" [(ngModel)]="value" (blur)="onInputBlur()" />

Класс:

private _value: any;

public get value(): string {
  return this._value;
}
public set value(newValue) {
  this._value = newValue;
  this.onChangeCallback(this._value);
}
public onInputBlur() {
  this.onTouchedCallback();
}

private onChangeCallback = (x: any) => { };
private onTouchedCallback = () => { };

writeValue(obj: any): void {
  this._value = obj;
}
registerOnChange(fn: any): void {
  this.onChangeCallback = fn;
}
registerOnTouched(fn: any): void {
  this.onTouchedCallback = fn;
}
setDisabledState ? (isDisabled: boolean): void {
}

И я привязываюсь к пользовательскому компоненту ввода, используя реактивную форму, такую ​​как:

<div [formGroup]="formGroup">
  <my-editor [formControlName]="'myValue'"></my-editor>
</div>

Оба элемента div и my-editor применяют класс ng-invalid, но я не могу найти элегантный способ применить этот класс к элементу input.

Вот Stackblitz, показывающий проблему. https://stackblitz.com/edit/angular-child-ng-invalid

1 Ответ

0 голосов
/ 29 июня 2018

Я решил вашу проблему, используя приведенную ниже реализацию с использованием 'NgControl', используя этот подход, вы сделаете свой пользовательский ввод модульным, который можно будет использовать по мере необходимости, пожалуйста, прокомментируйте, если я мог бы помочь в дальнейшем: https://stackblitz.com/edit/angular-sdrrbj?file=src%2Fapp%2Fapp.component.ts

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...