You can save the form initial values: this.initialValues = this.formGroup.value; And then pass those values to the reset function: this.formGroup.reset(this.initialValues);
SAMPLE PLUNKER I see two options: Propagate the errors from component FormControl to <select> FormControl whenever the <select> FormControl value changes Propagate the validators from component FormControl to <select> FormControl Below the following variables are available: selectModel is the NgModel of the <select> formControl is the FormControl of the component received as an argument Option … Read more
For those who may need a similar approach. Here’s my solution. I’ve built a custom validation rule according to my needs. SELECTBOX_VALUE: [ null, Validators.compose([ Validators.required, FormCustomValidators.valueSelected(this.myArray), ]), ]; export class FormCustomValidators { static valueSelected(myArray: any[]): ValidatorFn { return (c: AbstractControl): { [key: string]: boolean } | null => { let selectboxValue = c.value; let … Read more
The most elegant solution is leveraging TypeScript declaration files (*.d.ts) to introduce generic interfaces extending the standard form classes like AbstractControl, FormControl, etc. It doesn’t introduce any new functionality and has no footprint in the compiled JavaScript, but at the same time enforcing strong type checking. It was suggested by Daniele Morosinotto in March this … Read more
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 had same problem, Angular FormBuilder receives, initial state of control, and verify if the param its like to { value: any, disabled: boolean, ….. } if the parameter meets this struct, initialize the control with value and disabled/active. try: this.myFormGroup = this.fb.group( { field1: [{ value: ”, disabled: true }, SomeValidator1], field2: [{ value:”, … Read more
If you want to disable the group, you need to tell what this.Personal is, now you have just declared it as a FormGroup, nothing else. So you can do it after building the form: this.Personal = this.myForm.get(‘Personal’) Then you can just disable it with: this.Personal.disable(); DEMO: http://plnkr.co/edit/QAhY6A9950jqrgzvjVKu?p=preview
Don’t use [(ngModel)]! Reactive forms are much nicer. They make manual ngModel bindings obsolete, and they have some pretty sweet built-in features only a couple of which I’m going to cover in this answer. Binding to the form If you’re binding to a form control such as a text input, use this template syntax: <ng-container … 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
<input type=”password” placeholder=”Confirm Password” class=”form-control” [formControl]=”$any(myForm).controls[‘confirmpassword’]”/> Use the $any function to disable type checking. I resolved my error by using this.