Angular 2 Reactive Forms - Detect input change event on component

Question

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

oubchid · Accepted Answer · 2017-06-09 15:24:29Z

49

You can subscribe to your form changes by using this :

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

answered Jun 9, 2017 at 15:24

oubchid

5911 gold badge4 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Trevor de Koekkoek Over a year ago

good answer, but better type-safe would be: this.form.valueChanges.subscribe((data) => { if (data.yourControlName === 'someValue') { // } });

Dipendu Paul · Accepted Answer · 2018-06-15 07:06:27Z

48

For detecting changes in value of a particular field, 'valueChanges' event on that field can be subscribed, as shown below:

this.myForm.get('formcontrolname').valueChanges.subscribe(val => {
    this.message = val;
  });

answered Jun 15, 2018 at 7:06

Dipendu Paul

2,7631 gold badge26 silver badges23 bronze badges

3 Comments

Saurabh Singh Rajput Over a year ago

Can you please tell a little bit more, Where to include this snippet? Actually I have to detect the change of checkbox of dynamic form.

Tom Stickel Over a year ago

@SaurabhSinghRajput put it in ngOnInit()

Michael Dimmitt Over a year ago

Here is a good link on the subject, but as Tom Stickel mentions put it inside ngOnInit instead of ngOnChanges: alligator.io/angular/reactive-forms-valuechanges

Vignesh Ravichandran · Accepted Answer · 2023-01-02 08:05:01Z

0

For people who are checking for higher versions of Angular or to whom the accepted solution isn't working,

Try this

this.myForm.valueChanges.subscribe(val => {
this.message = val.formcontrolname;});

the approach is to use the variables inside the change detection and you can restrict it with the respective form control name

answered Jan 2, 2023 at 8:05

Vignesh Ravichandran

1884 silver badges11 bronze badges

Collectives™ on Stack Overflow

Angular 2 Reactive Forms - Detect input change event on component

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related