Category : angular-reactive-forms

I have the following logic: 1.component.ts onChangeRow($event) { form.controls["value"].patchValue($event.data.value, { emitEvent: false }); // } 2.component.ts @Output() changeRow: EventEmitter<any> = new EventEmitter<any>(); this.formGroup.valueChanges.subscribe(data => { this.changeRow.emit({selfRef: this.selfRef, form: this.formGroup, config: this.config}) }) It looks that patchValue method in the first component triggers a loop, as its new value is catched by valueChanges and the cycle ..

Read more

I have following form. arr is a list of FormBuilder. get arr() { return this.form.get(‘arr’) as FormArray; } this.form = this.fb.group({ id: this.fb.control(”), name: this.fb.control(”, Validators.required), arr: this.fb.array([], Validators.minLength(1)), }); public removeArr(idx: number) { this.arr.removeAt(0); } As you can see this.arr.removeAt(0), I am trying to remove first arr from the list, but it always removes ..

Read more

I want to Pass default value from HTML to Type script using reactive Form <ul class="list list_2"> <li>Subtotal <span>{{cartTotal | currency:’INR’:true:’2.0′}}</span></li> <li>Shipping Charge<span>{{shipping | currency:’INR’:true:’2.0′}}</span></li> <li>Total <span><input type="text" value="{{cartTotal+shipping | currency:’INR’:true:’2.0′}}" class="total" formControlName="TotalAmount" readonly></span></li> </ul> This is my HTML where i have given default value in input get TotalAmount(){ return this.billingForm.get("TotalAmount.value") In type script i ..

Read more

How can i set a formControlName in a subcomponent to optional? I will like to use ComponentA in ComponentB without a FormGroup but also in some other Components with Formgroup. Is there a possibility? ComponentA <app-quantity-counter [value]="cartItem.amount" [step]="1" [min]="1" [max]="1000" (onCounterChange)="onQuantityChange($event, cartItem)" controlName="amount" ></app-quantity-counter> ComponentA_TS viewProviders: [ { provide: ControlContainer, useExisting: FormGroupDirective, }, ], export ..

Read more

I am working on a form as below My code nested-form.component.ts public nestedForm: FormGroup; constructor( private formBuilder: FormBuilder) { this.calibrationForm = this.buildFormGroup(formBuilder); } buildFormGroup(formBuilder: FormBuilder): FormGroup { return new FormGroup({ motor: new FormControl(”, Validators.required), properties: new FormControl(""), }); } save() { console.log(this.nestedForm.value); } nested-form.component.html <form [formGroup]="nestedForm" > <mat-select class="field-select" [(ngModel)]="_selectedMotor" (selectionChange)="selectMotor($event.value)" formControlName="motor"> <mat-option class="select-option" *ngFor="let ..

Read more

I have Material Form containing text, number and select input fields. When using on mobile, after entering value into text/number field and pressing ‘enter’ it focuses on anohter field, except selects. Also after using select field it doesn’t focuses on any another field. I was creating my form according to this StackBlitz (but it doesn’t ..

Read more

I have a form which has a few properties. Hobbies should be a string[]. this.myReactiveForm = this.fb.group({ firstName: [”, [Validators.required]], lastName: [”, Validators.required], hobbies: [this.fb.array([])] }) I then have my form. I’m using keydown prevent default because I don’t want the enter key submitting the form. <form [formGroup]="myReactiveForm" (ngSubmit)="submitMyReactiveForm()" (keydown.enter)="$event.preventDefault()"> // other inputs for the ..

Read more