Невозможно получить доступ к родительским изменениям объекта formControl в отношении родительско-дочернего компонента в Angular 8
Я создал родительский компонент следующим образом:
<form [formGroup] = "cardForm">
<app-inputvalidator [controls] = "cardForm.get('name')"></app-inputvalidator>
</form>
Родительский файл TS
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl,Validators } from '@angular/forms';
@Component({
selector: 'app-card-form',
templateUrl: './card-form.component.html',
styleUrls: ['./card-form.component.css']
})
export class CardFormComponent implements OnInit {
nameFormControl ;
cardForm = new FormGroup({
name: new FormControl('', [Validators.minLength(5),Validators.maxLength(25)])
});
constructor() {
}
ngOnInit(): void {
this.nameFormControl = this.cardForm.get('name');
}
}
Я передаю nameFormControls дочернему компоненту и получаю доступ к нему в шаблоне, а также в классе следующим образом:
InputValidator.ts
import { Component, OnInit, Input } from '@angular/core';
import { FormControl} from '@angular/forms';
@Component({
selector: 'app-inputvalidator',
templateUrl: './inputvalidator.component.html',
styleUrls: ['./inputvalidator.component.css']
})
export class InputvalidatorComponent implements OnInit {
@Input() controls: FormControl;
constructor() {
}
ngOnInit(): void {
}
}
Введите Validator.html
<input [formControlName] = "controls"
<br>
<div>{{ controls.errors | json}}</div>
Проект скомпилирован успешно, ошибок нет.
Я получаю значение controls.errors всегда равным нулю. Почему я не могу распечатать объект controls.errors с помощью строковой интерполяции при изменении значения в поле ввода имени?
1 ответ
Решение
вы получаете null, потому что вы не устанавливаете требуемый валидатор, валидаторы min,maxLength вернут ошибку, если есть значение, а значение недействительно, если значение равно нулю или пустой строке, это будет считаться действительным
проверьте источник валидатора