Questions tagged angular-reactive-forms

Explore the latest questions and answers asked by our top developers.

angular-ionic create mcq with reactive form

I am trying to create a quiz where all questions and answers are shown in one go the array i am working with looks like ques = [ { "id": 1, "mcq_id": 1, "question": "my first quest", "answers": [ { "id": 1, "question_id": 1, "answer": "a1", "answer_description": null }, { "id": 2, "question_id": 1, "answer": […]

How to save start and end time of angular reactive forms controls into the mongodb using tsnode api

I Want to bind the start and end time into an object availableTime and then save it to the mongodb data base using ts node api but i don’t know how to do that Please any one can solve this This is my mongoose model import { model, Schema, Document, Date } from "mongoose"; export […]

Reactive forms, with Nested Select in Angular 11

Suppose that I receive a Text with a JSON with 5 levels initially; Continent Country State City Sector But, the levels can be reduced; Continent Country State And the levels can be augmented; Continent Country State City Sector Neighborhood Block That is to say that the levels can be variable. But, the subject can be […]

Cannot get form’s children control

I wrote a simple a simple Angular unit test as below: import { Component, ViewChild } from ‘@angular/core’; import { ComponentFixture, TestBed, waitForAsync } from ‘@angular/core/testing’; import { FormsModule, NgForm } from ‘@angular/forms’; fdescribe(‘AppComponent’, () => { @Component({ template: `<form #form="ngForm"> <input [(ngModel)]="test" name="test" /> </form>`, }) class TestHostComponent { public test = ”; @ViewChild(‘form’) […]

Angular removing Validators.min from form control validation

I have a form with 2 fields: select dropdown (2 option): with validation, without validation an input amount field depending on the first dropdown I have validators on the 2nd field: Validators.required, Validators.min(0.1). Im trying to use clearValidators() to remove the validation but it only removes the required but not the min(0.1) How do I […]

Angular Reactive Form _updateTreeValidity

I am trying to loop over a form array in a fromgroup that I have as below public publisherForm = new FormGroup({ books: new FormArray([]) }); public get books(): FormArray{ return this.publisherForm.controls.coverages as FormArray } <ng-container formArrayName="books" *ngFor="let book of books.value; let i = index" [formGroupName]="i"> <book [bookFormGroup]="book"></book> </ng-container> In the book component I have […]

By Joe
Categorized as angular, angular-reactive-forms Tagged ,

How to get material mat-autocomplete to allow as valid only a value that is in the option collection amd participate in reactive form validation?

I have a disabled button that I want enabled if the user types a valid value so every key stroke I need to see if it matches.. <mat-form-field appearance=”outline” style=”width: 100%;”> <mat-label>Vendor</mat-label> <input matInput type=”text” [formControl]=”fcVendor” [matAutocomplete]=”auto” (keydown)=”onKeyDownVendorInput($event)” (blur)=”onBlurVendorInput()”> <mat-autocomplete #auto=”matAutocomplete” (optionSelected)=”onClickVendorSelected($event)”> <mat-option *ngFor=”let selectedVendorString of autoFilter | async” [value]=”selectedVendorString”> {{selectedVendorString}} </mat-option> </mat-autocomplete> </mat-form-field> onKeyDownVendorInput(event: […]

Understanding Angular FormBuilder with Groups and ngModel data and how/if they can be used together?

I am running into some issues with trying to use FormBuilder in my Angular app and how I can set the default values in the form based on my ngModel data. In my class, I have the following code: form: FormGroup; constructor( private fb: FormBuilder, ) { } ngOnInit() { this.form ={ category: [”, […]

Rebinding [formGroup] does not work as expected

I have a reactive form bound by [formGroup] and [formControlName]. <div [formGroup]="form"> <mat-slide-toggle formControlName="toggle"> CLICK ME</mat-slide-toggle> </div> export class AppComponent { name = ‘Angular ‘ + VERSION.major; form: FormGroup; constructor(private fb: FormBuilder) { // this.doIt(); } ngOnInit() { this.doIt(); } doIt() { const form ={ toggle: this.form?.enable ?? true, }); if (this.form?.enabled ?? false) […]

By Antoniossss
Categorized as angular, angular-reactive-forms, forms Tagged , ,

Angular form in service

When having a multi step form divided in to multiple components; is there any key difference between making each one a control value accessor or getting the group from a form initialized in common service? One key difference that i thought about is that with control value accessor you make the code reusable. But if […]

By IdoAmar
Categorized as angular, angular-reactive-forms Tagged ,
1 2 3 113

Still Have Questions?

Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us