how to set form control value in angular

How to Set Form Control Value in Angular?

If you are working with forms in Angular, you may need to set the value of a form control programmatically. There are different ways to do it, but here are some examples:

1. Using setValue() method

You can use the setValue() method of the FormControl class to set the value of a form control. Here is an example:

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  template: `
    <form>
      <input type="text" [formControl]="nameControl">
    </form>
  `
})
export class AppComponent {
  nameControl = new FormControl('');

  ngOnInit() {
    this.nameControl.setValue('John Doe');
  }
}

In this example, we create a form control called nameControl and bind it to an input element using the [formControl] directive. Then, in the ngOnInit() method of the component, we set the value of the form control to 'John Doe' using the setValue() method.

2. Using patchValue() method

You can also use the patchValue() method of the FormControl class to set the value of a form control. Here is an example:

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  template: `
    <form>
      <input type="text" [formControl]="nameControl">
    </form>
  `
})
export class AppComponent {
  nameControl = new FormControl('');

  ngOnInit() {
    this.nameControl.patchValue('John Doe');
  }
}

In this example, we create a form control called nameControl and bind it to an input element using the [formControl] directive. Then, in the ngOnInit() method of the component, we set the value of the form control to 'John Doe' using the patchValue() method.

3. Using setValue() method with an object

You can also use the setValue() method with an object to set the values of multiple form controls at once. Here is an example:

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

@Component({
  selector: 'app-root',
  template: `
    <form [formGroup]="form">
      <input type="text" formControlName="firstName">
      <input type="text" formControlName="lastName">
    </form>
  `
})
export class AppComponent {
  form = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl('')
  });

  ngOnInit() {
    this.form.setValue({
      firstName: 'John',
      lastName: 'Doe'
    });
  }
}

In this example, we create a form group called form with two form controls: firstName and lastName. Then, in the ngOnInit() method of the component, we set the values of both form controls using the setValue() method with an object.

Conclusion

These are some ways to set the value of a form control in Angular. Depending on your use case, you may choose one of these methods or another one. Just remember that you need to import the FormControl and/or FormGroup classes from the @angular/forms module to use them.