Я пытаюсь применить стиль проверки ошибок с помощью ControlValueAccessor в настраиваемом текстовом поле ввода материала. С тех пор, как был применен этот пользовательский компонент, все статусы проверки красной границы с formControlName / FormBuilders не отображаются для required, minlength и т. Д. Он работал изначально (из коробки) с текстовым полем Angular Material, пока не был применен пользовательский элемент управления.
Цель состоит в том, чтобы настраиваемое текстовое поле работало с проверкой формы. Это естественно проявилось с текстовым полем matInput.
Обновление: опубликованный ответ; однако не уверен, что это самый эффективный вариант, пытаясь заставить Saloo работать также (если кто-то может опубликовать stackbliz, было бы здорово), открыт для любых более эффективных вариантов
Машинопись:
import { Component, OnInit, Input, ViewChild, EventEmitter, Output, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@Component({
selector: 'app-input-textbox',
templateUrl: './input-textbox.component.html',
styleUrls: ['./input-textbox.component.scss'],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => InputTextboxComponent),
multi: true
}
]
})
export class InputTextboxComponent implements OnInit, ControlValueAccessor {
@Input() MaxLength: string;
@Input() Value: string;
@Input() type: string;
@Input() Label: string;
@Input() PlaceHolder: string;
@Output() saveValue = new EventEmitter();
@Output() onStateChange = new EventEmitter();
disabled: boolean;
constructor() { }
ngOnInit() {
}
saveValueAction(e) {
this.saveValue.emit(e.target.value);
}
onChange(e) {
this.Value = e;
}
onTouched() {
this.onStateChange.emit();
}
writeValue(value: any) {
this.Value = value ? value : '';
}
registerOnChange(fn: any) { this.onChange = fn; }
registerOnTouched(fn: any) { this.onTouched = fn; }
setDisabledState(isDisabled) { this.disabled = isDisabled; }
}
HTML:
<div class="input-wrap">
<mat-form-field appearance="outline">
<mat-label>{{Label}}</mat-label>
<input matInput
[attr.maxlength] = "MaxLength"
[value]="Value ? Value : ''"
[placeholder]="PlaceHolder ? PlaceHolder : ''"
[type]="type ? type: 'text'"
(input)="onChange($event.target.value)"
>
</mat-form-field>
</div>
Попытка включить этот ответ с естественным стилем ошибки из текстового поля Angular Material, Наследование проверки с использованием ControlValueAccessor в Угловой