输入内容时 FormControl 不更新

Question

我有一个使用自定义组件作为输入的表单，它接收 ControlName。当我在组件中键入内容时，它不会更新“错误”属性。

\n\n

应用程序-pf-input-text.ts：

\n\n

import { Component, OnInit, Input } from \'@angular/core\';\n\n@Component({\n  selector: \'app-pf-input-text\',\n  templateUrl: \'./pf-input-text.component.html\',\n  styleUrls: [\'./pf-input-text.component.scss\']\n})\nexport class PfInputTextComponent implements OnInit {\n\n  @Input() id: string;\n  @Input() name: string;\n  @Input() value: string;\n  @Input() placeholder: string;\n\n  //falta trim\n\n  @Input() maxlength: string;\n  @Input() minlength: string;\n\n  @Input() disabled: boolean;\n  @Input() required: boolean;\n\n  constructor() { }\n\n  ngOnInit() {\n  }\n}\n

\n\n

app-pf-input-text.html：

\n\n

<div class="input-group">\n  <input \n      type="text" class="form-control">\n</div>\n

\n\n

我的表格：

\n\n

import { Component, OnInit, Input } from \'@angular/core\';\n\nimport { FormArray, FormBuilder, FormGroup, Validators, FormControl } from \'@angular/forms\';\n\nimport { Empresa } from \'../empresa.model\';\n\n@Component({\n  selector: \'app-empresa-cadastro\',\n  templateUrl: \'./empresa-cadastro.component.html\',\n  styleUrls: [\'./empresa-cadastro.component.css\']\n})\nexport class EmpresaCadastroComponent implements OnInit {\n\n  empresaForm: FormGroup;\n\n  nomeControl: FormControl;\n\n  constructor(private fb: FormBuilder) {}\n\n  createForm() {\n    this.nomeControl = new FormControl(\'\', [\n      Validators.required,\n      Validators.minLength(3),\n      Validators.maxLength(10)\n    ]);\n  }\n\n  createFormControl() {\n    console.log(\'Criando FormControl\');\n  }\n\n  onSubmit() {\n    const empresa = this.empresaForm.value as Empresa;\n    console.log(\'Empresa: \', empresa);\n  }\n\n  limpar() {\n    this.empresaForm.reset();\n  }\n\n  ngOnInit() {\n    this.createForm();\n  }\n\n}\n

\n\n

我的表单 html：

\n\n

<form [formGroup]="empresaForm">\n  <div class="form-row">\n\n\n    <div class="col-md-4 mb-3">\n      <label for="validationServer01">Nome empresa</label>\n      <app-pf-input-text controlName="nome"></app-pf-input-text>\n      {{nomeControl.errors | json}} - {{nomeControl.dirty}}\n      <div class="form-control-feedback" *ngIf="nomeControl.errors && (nomeControl.dirty || nomeControl.touched)">\n        <div *ngIf="nomeControl.errors.required" class="has-error">\n          Campo obrigatorio\n        </div>\n        <div *ngIf="nomeControl.errors.maxlength">\n          Campo ultrapassou o tamanho maximo.\n        </div>\n        <div *ngIf="nomeControl.errors.minlength">\n          Campo n\xc3\xa3o antingiu o tamanho minimo\n        </div>\n      </div>\n    </div>\n\n\n  </div>\n</form>\n

\n\n

它在“ControlName”中提供了一个初始值，但当我输入输入时它永远不会更新。

\n\n

{{nomeControl.错误| json}} - {{nomeControl.dirty}}

\n\n

返回：

\n\n

{“必需”：true } - false

\n\n

当您在输入中输入某些内容时，这些值 \xe2\x80\x8b\xe2\x80\x8bar 不会更新。

\n

Answer 1

您正在混合反应式表单和模板驱动表单。你的PfInputTextComponent有一些问题。使用反应式表单，您不需要required、maxLength和minLength输入disabled。你确实需要一个FormControl输入。如果您使用反应式表单，则可以在组件类中设置值和验证器，而不是在模板中。

this.nomeControl = new FormControl('', [
  Validators.required,
  Validators.minLength(3),
  Validators.maxLength(10)
]);

这足以设置验证和初始值。您现在需要做的就是将此控件绑定到您的 html <input />using[formControl]指令。

app-pf-input-text.html

<div class="input-group">
  <input [formControl]="ctrl" type="text" class="form-control">
</div>

应用程序-pf-input-text.ts：

import { Component, OnInit, Input } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-pf-input-text',
  templateUrl: './pf-input-text.component.html',
  styleUrls: ['./pf-input-text.component.scss']
})
export class PfInputTextComponent implements OnInit {

  @Input() ctrl: FormControl;
  @Input() placeholder: string;

  constructor() {}

  ngOnInit() {}
}

表单.组件.html

<app-pf-input-text [ctrl]="nomeControl"></app-pf-input-text>