How to set value to form control in Reactive Forms in Angular

by

Setting or Updating of Reactive Forms Form Control values can be done using both patchValue and setValue. However, it might be better to use patchValue in some instances.

patchValue does not require all controls to be specified within the parameters in order to update/set the value of your Form Controls. On the other hand, setValue requires all Form Control values to be filled in, and it will return an error if any of your controls are not specified within the parameter.

In this scenario, we will want to use patchValue, since we are only updating user and questioning:

this.qService.editQue([params["id"]]).subscribe(res => {
  this.question = res;
  this.editqueForm.patchValue({
    user: this.question.user,
    questioning: this.question.questioning
  });
});

EDIT: If you feel like doing some of ES6’s Object Destructuring, you may be interested to do this instead 🙃 

const { user, questioning } = this.question;

this.editqueForm.patchValue({
  user,
  questioning
});

Ta-dah!

More Related Contents:

  1. How to disable a input in angular2
  2. When to use FormGroup vs. FormArray?
  3. Angular 4 validator to check 2 controls at the same time
  4. In Angular, how to add Validator to FormControl after control is created?
  5. Reactive Forms: How to add new FormGroup or FormArray into an existing FormGroup at a later point in time in Angular till v14
  6. addControl to FormGroup dynamically in Angular
  7. Angular 5 Reactive Forms – Radio Button Group
  8. How to use pipes in Angular 5 reactive form input
  9. How to make a formControl readonly
  10. angular 6 warning for using formControlName and ngModel
  11. How to use reportProgress in HttpClient in Angular? [duplicate]
  12. How to use reactive forms in a dynamic component
  13. Angular HTTP GET with TypeScript error http.get(…).map is not a function in [null]
  14. How to detect a route change in Angular?
  15. Error when trying to inject a service into an angular component “EXCEPTION: Can’t resolve all parameters for component”, why?
  16. How to go back last page
  17. Angular Subscribe within Subscribe
  18. How to store token in Local or Session Storage in Angular 2?
  19. How to bind to data-* attribute in angular2? [duplicate]
  20. Angular2: How is ngfor expanded
  21. Angular 2: Iterate over reactive form controls
  22. Can’t reload/refresh active route
  23. Error trying to diff ‘[object Object]’ in Angular
  24. Error: supportsScrollBehavior is not declared configurable
  25. Differences between value and ngValue in Angular 5
  26. NX MFE angular module federation not able to access remote micro front end
  27. ::ng-deep going to be deprecated – Any alternatives?
  28. Angular 4 ExpressionChangedAfterItHasBeenCheckedError
  29. Accessing firebase.storage() with AngularFire2 (Angular2 rc.5)
  30. Custom encoding for urls using Angular 2 Router (using a + sign in place of a space)

Leave a Comment