CODEWITHSUNDEEP
angularangular-componentsangular-reactive-formsangular-validation
Rafael Augusto
Rafael Augusto

Reputation: 797

FormControl does not update when typing in input

I have a form that uses a custom component as input, which receives a ControlName. It is not updating the 'errors' property when I type something in the component.

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>

my form:

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();
  }

}

my form 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>

It comes up with an initial value in'ControlName ', but it is never updated while I'm typing in the input.

{{nomeControl.errors | json}} - {{nomeControl.dirty}}

return:

{ "required": true } - false

When you enter something in the input, these values ​​are not updated.

Upvotes: 3

Views: 7884

Answers (1)

Tomasz Kula
Tomasz Kula

Reputation: 16847

You are mixing reactive and template driven forms. Your PfInputTextComponent has a few problems. With Reactive Forms, you do not need required, maxLength, minLength and disabled inputs. You do need a FormControl input. If you are using Reactive Forms, you set the value and validators in the component class, not in the template. 

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

This is enough to set the validation and initial value. All you need to do now, is bind this control to your html <input /> using [formControl] directive.

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>

Upvotes: 6

Related Questions