Как показать ошибку красной границы во входном текстовом теге внутри пользовательского компонента, который реализует ControlValueAccessor? - PullRequest
Новая
       22

Как показать ошибку красной границы во входном текстовом теге внутри пользовательского компонента, который реализует ControlValueAccessor?

0 голосов
/ 04 мая 2020

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

<form [formGroup]="form" (submit)="submitFrom()">
<app-from-input FromControlName="name"></app-from-input>
</form>


export class AppComponent {
 form: FormGroup;

 constructor() {
   this.form = new FormGroup({
     name: new FormControl('', Validators.required)
   });
 }

 submitFrom() {
   console.log('form submited')
 }
}



@Component({
  selector: 'app-from-input',
  template: `<input type="text"  (input)="onChanged($event.target.value)" (blur)="onTouchend()">`,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => FormInputComponent),
      multi: true
    }
  ],
  styleUrls: ['./app.component.scss']
})
export class FormInputComponentv, ControlValueAccessor {
 form: FormGroup;
 valueOfinput: string; 
 onChanged: (e) => void;
 onTouchend: () => void;

 constructor(){
 }

 writeValue(value): void {
  this.valueOfinput = value ? value : '';
}
registerOnChange(fn: (rating: number) => void): void {
  this.onChange = fn;
}
registerOnTouched(fn: () => void): void {
  this.onTouched = fn;
}
}
...