Thursday, October 15, 2020

Angular Form setValue() and patchValue()

In this tutorial we’ll see how to set values for the form controls using setValue and patchValue in Angular forms. We’ll also see the difference between setValue and patchValue methods.


setValue in Angular

setValue as the name suggests is a method used to set values. You can use it to set value of a single form control instance, form group or form array.

Tuesday, October 13, 2020

Checkbox in Angular Form Example

In this post we’ll see how to use check boxes in Angular form. We’ll see examples of adding check boxes to both template-driven and reactive form in Angular.

Checkbox in Reactive form Angular example

In this Angular Reactive form example we’ll have a form with two input fields for name and date (with a date picker for picking date) and a group of check boxes to select favorite exercises.

Monday, October 12, 2020

Radio Button in Angular Form Example

In this post we’ll see how to use radio buttons in Angular form. We’ll see examples of adding radio button to both template-driven and reactive form in Angular.


Radio button in template driven form example

In this Angular template driven form example we’ll have a form with two input fields for name and email, a date picker for picking date and a group of radio buttons to select membership type.

Thursday, October 8, 2020

FormGroup in Angular With Examples

Using FormGroup in Angular forms you can group FormControl instances and tracks the value and validity state of those instances as a group rather than for each individual FormControl instance. In this post we'll see example of using FormGroup with Angular template-driven form as well as with Reactive form.


Tuesday, October 6, 2020

Angular Reactive Form Validation Example

In the post Angular Reactive Form Example we saw an example of creating a simple Reactive form in Angular in this post we’ll add to that example to create an Angular reactive form with validation.

Tracking control states

NgModel directive used with the form controls tracks the state of that control. Three things you'll look for while validating form fields are-

  1. Whether user touched the control or not,
  2. If the value of the form control is changed
  3. If the entered value is valid or invalid.