0

Is there a way to refer to Formbuilder members names in a strongly type fashion? If form builder names change, then the get functions below will not notice, and not display any compilation error. This can create issues in program functionality.

Need to refer to formbuilder control members in a clean way.

{
this.customerForm = this.formBuilder.group({
  'firstName': [null, [Validators.required,Validators.maxLength(50)]],
  'phoneNumber': [null, [Validators.required,Validators.maxLength(50)]],
  'streetName': [null, [Validators.required,Validators.maxLength(50)]],

  'emailAddress': [null, [Validators.maxLength(50), Validators.email]],
  'city': [null, [Validators.required, Validators.maxLength(200)]],
  'state': [null, [Validators.maxLength(200)]],
  'zip':[null,[Validators.maxLength(200)]]
});

}

Referring to formbuilder member names through a string, which will not flag an error if component changes.

  this.customerForm.get('firstName').clearValidators();
  this.customerForm.get('firstName').updateValueAndValidity();

  this.customerForm.get('phoneNumber').clearValidators();
  this.customerForm.get('phoneNumber').updateValueAndValidity();

  this.customerForm.get('streetName').clearValidators();
  this.customerForm.get('streetName').updateValueAndValidity();
  • doesn't work. this is by design – bryan60 Jan 13 '20 at 20:28
  • @bryan60 answer works below –  Jan 14 '20 at 04:50
  • It works but it’s not what I’d refer to as “clean” and probably increases your maintenance costs in the long run vs accessing in non typesafe way. Adds a lot of boiler plate with unclear gains. – bryan60 Jan 14 '20 at 05:32
  • well I have only 10 extra lines, whatever for all my field members repeated, etc –  Jan 14 '20 at 05:36
  • 10 extra lines for what gain? the code is more brittle and less dynamic now and requires more effort when things change. You're still bound to string accessing in templates adn templates aren't typesafe to begin with (for now). The point of making things typesafe should be to make your life easier. It's unclear what youv'e made easier here to me. – bryan60 Jan 14 '20 at 05:42
  • hmm, I agree, that kind of makes sense then, I was trying to improve upon Elisio answer here, https://stackoverflow.com/questions/59702096/toggle-multiple-fields-on-off-in-formbuilder-clean-syntax-in-angular maybe you have better answer for this, thanks for the other viewpoint, started angular few months ago –  Jan 14 '20 at 05:45

1 Answers1

1

Sure:

this.firstNameControl = 
  this.formBuilder.control(null, [Validators.required,Validators.maxLength(50)]);
this.customerForm = this.formBuilder.group({
  firstName: this.firstNameControl,
  ...
});

[...]

this.firstNameControl.clearValidators();
this.firstNameControl.updateValueAndValidity();
JB Nizet
  • 678,734
  • 91
  • 1,224
  • 1,255
  • can you create an example with the validators above? this code was not working, this.formBuilder.control(...); what goes in the dot? –  Jan 13 '20 at 21:05
  • also, I am trying to improve upon Elisio answer here, with strongly typed method see question https://stackoverflow.com/questions/59702096/toggle-multiple-fields-on-off-in-formbuilder-clean-syntax-in-angular –  Jan 13 '20 at 21:10
  • question here also https://stackoverflow.com/questions/59727651/refer-to-formbuilder-members-in-a-strongly-typed-list-in-angular-8 –  Jan 14 '20 at 05:22