无法访问 Angular 8 中父子组件关系中的父 formControl 对象更改

Question

我创建了一个父组件如下：

<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 传递给子组件并在模板中访问它，class 如下：

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？

Answer 1

you get null becuase you don't put required validator the min,maxLength validators will return an error if there is value and the value is not valid , if the value is null or empty string this will consider a valid

检查验证器 source

无法访问 Angular 8 中父子组件关系中的父 formControl 对象更改

Cannot access the parent formControl object changes in a Parent-Child Component relationship in Angular 8

html

angular

angular-reactive-forms

angular-forms

angular-input