angular-reactive-forms

Angular 5 Reactive Forms – Radio Button Group

by

I tried your code, you didn’t assign/bind a value to your formControlName. In HTML file: <form [formGroup]=”form”> <label> <input type=”radio” value=”Male” formControlName=”gender”> <span>male</span> </label> <label> <input type=”radio” value=”Female” formControlName=”gender”> <span>female</span> </label> </form> In the TS file: form: FormGroup; constructor(fb: FormBuilder) { this.name=”Angular2″ this.form = fb.group({ gender: [”, Validators.required] }); } Make sure you use Reactive … Read more

Reactive Forms: How to add new FormGroup or FormArray into an existing FormGroup at a later point in time in Angular till v14

by

FormGroup addControl method accepts AbstractControl as parameter which can be either a FormControl or a FormArray or another FormGroup as they all extend AbstractControl. class FormGroup extends AbstractControl {} class FormControl extends AbstractControl {} class FormArray extends AbstractControl {} FormBuilder can help you building such controls with array() and group() methods: this.myForm = this.fb.group({ id: … Read more

In Angular, how to add Validator to FormControl after control is created?

by

You simply pass the FormControl an array of validators. Here’s an example showing how you can add validators to an existing FormControl: this.form.controls[“firstName”].setValidators([Validators.minLength(1), Validators.maxLength(30)]); Note, this will reset any existing validators you added when you created the FormControl. Angular 12 update Since Angular 12, if you want to add new validators to the form without … Read more

Angular 4 validator to check 2 controls at the same time

by

The min, max and required validators can be kept as is. If you want to validate one control based on the value of another, you need to lift the validation to the parent control. import { Component } from ‘@angular/core’; import { ValidatorFn, FormBuilder, FormGroup, Validators } from ‘@angular/forms’; const portStartEnd: ValidatorFn = (fg: FormGroup) … Read more

get multiple checkbox value as an array in angular

by

Thre’re several errors in your code. The last stackblitz you indicate (that gone from this SO) is an “imaginative” way to mannage a series of check-boxes to feed a formControl that store an array of strings. The idea is that the input has [checked] and (change), but NOT formControlName (it’s the reason because at first … Read more

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 … Read more

Angular 5 FormGroup reset doesn’t reset validators

by

It (FormGroup) behaves correctly. Your form requires username and password, thus when you reset the form it should be invalid (i.e. form with no username/password is not valid). If I understand correctly, your issue here is why the red errors are not there at the first time you load the page (where the form is … Read more