Angular Reactive Forms - proper annotation-CodePudding

I have the following form in an angular component:

this.signUpForm = this.fb.group({
  agencyName: ['', [Validators.required],
  taxId: ['', [Validators.required],
  address: ['', Validators.required],
  city: ['', Validators.required],
  state: ['', Validators.required],
  zip: ['', Validators.required],
  county: ['', Validators.required],
  firstName: ['', Validators.required],
  lastName: ['', Validators.required],
  mobile: ['', Validators.required],
  phone: [''],
});

What is the correct way to assign a control in this form to a variable?

this.control = this.signUpForm.controls.state;

this.control = this.signUpForm.controls.['state'];

In Angular 14 I am getting syntax error highlighting for the first annotation, while in previous versions it has worked.

CodePudding user response：

this.control = this.signUpForm..get('state')

OR we can define a function :

    get state() {

  return this.signUpForm.get('state');
}

you can also get the value in the HTML so you can subscribe to it :

this.signUpForm.get('state').valueChanges.subscribe(
      value => console.log(value)
    );

CodePudding user response：

You can use this to get your each form control

get agencyName(){
    return this.signUpForm.get('agencyName');
}