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);
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
The piece I was missing was mentioned in rusev’s answer, and that is injecting the ControlContainer. Turns out that if you place formGroupName on a component, and if that component injects ControlContainer, you get a reference to the container which contains that form. It’s easy from here. We create a sub-form component. @Component({ selector: ‘sub-form’, … Read more
You are on the right track, you just need to add an actions item to displayedColumns list: displayedColumns = [“username”, “email”, “userFirstName” … , “actions”]; and: <ng-container cdkColumnDef=”actions”> <md-header-cell > Actions </md-header-cell> <md-cell *cdkCellDef=”let row” > <button md-raised-button >Edit</button> </md-cell> </ng-container>
To expand on Radim Köhler answer. here is a shorter way of writing that function. getControlName(c: AbstractControl): string | null { const formGroup = c.parent.controls; return Object.keys(formGroup).find(name => c === formGroup[name]) || null; }
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
If you want to get only the status and not the value you can use statusChanges: export class Component { @ViewChild(‘myForm’) myForm; this.myForm.statusChanges.subscribe( result => console.log(result) ); } If you even want data changes, you can subscribe to the valueChanges of the form and check the status of the form using this.myForm.status: export class Component … Read more
I’m currently using [ngValue] and it stores objects just fine. The explanation as to why you experienced issues using (change) instead of (ngModelChange) can be found in this question So, since you’ve already used [ngValue], you probably want to do something like this, where you will only use one way binding in order to be … Read more
Should I do <input formControlName=”gender” type=”radio”> just like I do with text input’s? Yes. How does this work? Form control directives use a ControlValueAccessor directive to communicate with the native element. There are different types of ControlValueAccessors for each of the possible inputs. The correct one is chosen by the selector of the value accessor … Read more
Component import { Component, ElementRef, ViewChild, AfterViewInit} from ‘@angular/core’; … @ViewChild(‘input1’, {static: false}) inputEl: ElementRef; ngAfterViewInit() { setTimeout(() => this.inputEl.nativeElement.focus()); } HTML <input type=”text” #input1>