输入输入时 FormControl 不更新

Posted 2023-03-13

【中文标题】输入输入时 FormControl 不更新

【英文标题】：FormControl does not update when typing in input

【发布时间】：2018-09-21 21:36:06

【问题描述】：

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

app-pf-input-text.ts:

import  Component, OnInit, Input  from '@angular/core';

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

  @Input() id: string;
  @Input() name: string;
  @Input() value: string;
  @Input() placeholder: string;

  //falta trim

  @Input() maxlength: string;
  @Input() minlength: string;

  @Input() disabled: boolean;
  @Input() required: boolean;

  constructor()  

  ngOnInit() 
  

app-pf-input-text.html:

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

我的表格：

import  Component, OnInit, Input  from '@angular/core';

import  FormArray, FormBuilder, FormGroup, Validators, FormControl  from '@angular/forms';

import  Empresa  from '../empresa.model';

@Component(
  selector: 'app-empresa-cadastro',
  templateUrl: './empresa-cadastro.component.html',
  styleUrls: ['./empresa-cadastro.component.css']
)
export class EmpresaCadastroComponent implements OnInit 

  empresaForm: FormGroup;

  nomeControl: FormControl;

  constructor(private fb: FormBuilder) 

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

  createFormControl() 
    console.log('Criando FormControl');
  

  onSubmit() 
    const empresa = this.empresaForm.value as Empresa;
    console.log('Empresa: ', empresa);
  

  limpar() 
    this.empresaForm.reset();
  

  ngOnInit() 
    this.createForm();
  

我的表单html：

<form [formGroup]="empresaForm">
  <div class="form-row">


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


  </div>
</form>

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

nomeControl.errors | json - nomeControl.dirty

返回：

“必需”：真 - 假

当你在输入中输入东西时，这些值不会更新。

【参考方案1】：

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

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

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

app-pf-input-text.html

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

app-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() 

form.component.html

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