Angular 2 Reactive Forms - Detect input change event on component

Rafael L R picture Rafael L R · Jun 9, 2017 · Viewed 32.8k times · Source

I would like to detect the value of change event to the input on form.component.ts. I would not like to call the function ex: (onChange) = "function($event.target.value)"

public form: FormGroup;

constructor(private formBuilder: FormBuilder){ 

}

private loadForm(){
    this.form = this.formBuilder.group({
        tipo: [null, Validators.required],
        nomeRazao: [null, Validators.compose([Validators.required, Validators.minLength(3), Validators.maxLength(64)])],
        apelidoFantasia: [null, Validators.compose([Validators.required, Validators.minLength(3), Validators.maxLength(64)])],
        cpfCnpj: [null, Validators.compose([Validators.required, Validators.minLength(11), Validators.maxLength(14)])],
        rgIe: [null],
        contato: this.formBuilder.group({
            email: [null],
            telefone: [null]
        }),
        endereco: this.formBuilder.group({
            cep: [null, Validators.pattern('^([0-9]){5}([-])([0-9]){4}$')],
            uf: [null],
            cidade: [null],
            bairro: [null, Validators.required],
            logradouro: [null],
            complemento: [null],
            numero: [null, Validators.pattern('/^\d+$/')]
        })
    });
}

ngOnInit() {
    this.loadForm();
}

Answer

oubchid picture oubchid · Jun 9, 2017

You can subscribe to your form changes by using this :

this.form.valueChanges.subscribe(() => {
   if (this.registerForm.controls['yourControlName'].value === 'someValue') {
      // 
   }
 });