Typescript generic angular forms with optional properties

Typescript Generic Angular Forms with Optional Properties

When working with Angular forms in TypeScript, you may come across a scenario where you need to handle optional properties. In this blog post, we will explore how to create generic Angular forms that can handle optional properties efficiently.

Let’s consider a simple example where we have a user registration form with optional fields like phone number and address. We want to create a generic form that can handle these optional properties without any hassle.

Approach 1: Using Conditional Validation

In this approach, we can use conditional validation to handle optional properties. We can create a custom validator function that checks if the optional property has a value, and if it does, apply the required validation. Otherwise, skip the validation.

Here’s an example of how to implement this approach:

import { FormControl, FormGroup, Validators } from '@angular/forms';

function optionalValidator(control: FormControl) {
  if (control.value) {
    return Validators.required(control);
  }
  
  return null;
}

export class UserRegistrationForm {
  form: FormGroup;
  
  constructor() {
    this.form = new FormGroup({
      name: new FormControl('', Validators.required),
      email: new FormControl('', Validators.required),
      phoneNumber: new FormControl('', optionalValidator),
      address: new FormControl('', optionalValidator)
    });
  }
}

In the above code snippet, we have created a custom validator function called optionalValidator. This function checks if the control has a value and applies the required validation if it does. We then use this validator for the optional properties in the form.

Approach 2: Using Conditional Controls

Another approach is to use conditional controls to handle optional properties. We can create a generic form control that conditionally adds or removes the required validator based on the presence of a value.

Here’s an example of how to implement this approach:

import { FormControl, FormGroup, Validators } from '@angular/forms';

export class UserRegistrationForm {
  form: FormGroup;
  
  constructor() {
    this.form = new FormGroup({
      name: new FormControl('', Validators.required),
      email: new FormControl('', Validators.required),
      phoneNumber: new FormControl(''),
      address: new FormControl('')
    });
    
    this.form.get('phoneNumber').valueChanges.subscribe(value => {
      if (value) {
        this.form.get('phoneNumber').setValidators(Validators.required);
      } else {
        this.form.get('phoneNumber').clearValidators();
      }
      
      this.form.get('phoneNumber').updateValueAndValidity();
    });
    
    this.form.get('address').valueChanges.subscribe(value => {
      if (value) {
        this.form.get('address').setValidators(Validators.required);
      } else {
        this.form.get('address').clearValidators();
      }
      
      this.form.get('address').updateValueAndValidity();
    });
  }
}

In the above code snippet, we subscribe to the valueChanges event of the optional properties (phoneNumber and address). When the value changes, we conditionally add or remove the required validator using the setValidators and clearValidators methods. We then update the validity of the control using the updateValueAndValidity method.

These are two approaches to handle optional properties in generic Angular forms. You can choose the approach that best suits your requirements and coding style.

By using either of these approaches, you can create generic Angular forms that efficiently handle optional properties. This will make your code more maintainable and flexible.

That’s it for this blog post! We hope you found it helpful in handling optional properties in TypeScript generic Angular forms. If you have any questions or suggestions, feel free to leave a comment below.

Happy coding!