There’s a gotcha! That is, your observable never completes… This is happening because the observable never completes, so Angular does not know when to change the form status. So remember your observable must to complete. You can accomplish this in many ways, for example, you can call the first() method, or if you are creating … Read more
I’ve created a stackblitz take a look. In the component.ts file import { Component } from ‘@angular/core’; import {FormBuilder,FormGroup, ValidationErrors, ValidatorFn} from ‘@angular/forms’ @Component({ selector: ‘my-app’, templateUrl: ‘./app.component.html’, styleUrls: [ ‘./app.component.css’ ] }) export class AppComponent { myForm: FormGroup; defaultValue = 20; constructor(private formBuilder: FormBuilder) { this.myForm = this.formBuilder.group({ myControl1: this.defaultValue, myControl2: this.defaultValue }); debugger … Read more
I had the same situation for me to update FormGroup | FormArray at nested level controls. check this out(worked for me): /** * Re-calculates the value and validation status of the entire controls tree. */ function updateTreeValidity(group: FormGroup | FormArray): void { Object.keys(group.controls).forEach((key: string) => { const abstractControl = group.controls[key]; if (abstractControl instanceof FormGroup || … Read more
import {AbstractControl, FormBuilder, FormGroup, Validators} from set your password input into the group and no need to use “ngModel”. <div class=”form-group row” formGroupName=”passwords”> <div class=”form-group”> <label for=”password” class=”control-label”>Contraseña:</label> <input type=”password” class=”form-control” formControlName=”password” title=”Please enter your password”> <p class=”help-block” *ngIf=”signUpForm.get(‘password’).hasError(‘required’) && signUpForm.get(‘password’).touched”>Debe ingresar una contraseña</p> </div> <div class=”form-group”> <label for=”confirmedPassword” class=”control-label”>Confirmar Contraseña:</label> <input type=”password” class=”form-control” formControlName=”confirmedPassword” … Read more
Problem description From the documentation we see two different lines with the group() function group(controlsConfig: { [key: string]: any; }, options?: AbstractControlOptions): FormGroup AND group(controlsConfig: { [key: string]: any; }, options: { [key: string]: any; }): FormGroup The 2nd definition is what is deprecated The difference in this lines is options?: AbstractControlOptions and options: { … Read more
EDIT 2 As Alex and the official documentation says, Angular version 5.0.0 has new option for your ngModel updateOn: ‘blur’ this.email = new FormControl(null, { validators: Validators.required, updateOn: ‘blur’ }); Also you can use other update options: change (default), blur, submit. Original I use directive where remove whole validation on focus and return it back … Read more
If you are using Angular 12.2 or higher, you can use the AbstractControl methods addValidators, removeValidators, and hasValidator, as per the docs: if(this.businessFormGroup.get(‘businessType’).value !== ‘Other’){ this.businessFormGroup.get(‘description’).addValidators(Validators.required); } else { this.businessFormGroup.get(‘description’).clearValidators(); } For older versions, Angular forms have a built in function setValidators() that enables programmatic assignment of Validators. However, this will overwrite your validators. For … Read more
It means that you have to add multiple validators in array . Example: With Error profileFormGroup = { budget: [null, Validators.required, Validators.min(1)] }; Above one throws error that validator to return Promise or Observable Fix: profileFormGroup = { budget: [null, [Validators.required, Validators.min(1)]] }; Explanation: In angular Reactive form validation done by using in-built validators which … Read more