Issue I have the following form dinamically populated with multiple select inputs <form [formGroup]=”searchForm” (ngSubmit)=”onSubmit(searchForm.value)”> <div class=”col-md-2″ *ngFor=”let filter of this.filters; index as i”> <div class=”form-group”> <select formArrayName=”filters” size=”5″ class=”form-control” (change)=”onSelectChange($event)”> <option [ngValue]=”null” value=”-1″ disabled class=”first-option-item”>{{ filter.name }}</option> <option *ngFor=”let
Continue readingTag: angular-reactive-forms
[SOLVED] Angular 5 FormGroup reset doesn't reset validators
Issue I have a form on my page and when I call FormGroup.reset() it sets the forms class to ng-pristine ng-untouched but FormControl.hasError(…) still returns truthy. What am I doing wrong here? Template <form [formGroup]="myForm" (ngSubmit)="submitForm(myForm)"> <mat-form-field> <input matInput formControlName="email"
Continue reading[SOLVED] Angular custom validator not firing when input untouched?
Issue I have a reactive form as following: this.form = this.formBuilder.group({ name: [”, Validators.required], email: [”, this.customValidator()] }); I also have a "submit" button with a [disabled] condition: <button [disabled]="form.invalid" (click)="create()">Create</button> If email input is untouched and I modify name
Continue reading[SOLVED] How to get response data of dialog box returned by a service after dialog box is closed inside parent component in angular
Issue I created interfaces for passing data to dialog box to act as reusable component. companynews-interfaces.ts export interface ConfirmDialogData { title: string; description: string; imageSrc: string; showText: boolean; modalFormData: any; } I’m calling the above interfaces in parent component for
Continue reading[SOLVED] Angular form mode toggling
Issue lets say that we have a very basic angular reactive form, with two modes: edit and show. And in show mode input fields are disabled, and in edit mode enabled: <form [formGroup]="formGroup" (ngSubmit)="submitForm()" novalidate> <label for="fname">First name:</label><br /> <input
Continue reading[SOLVED] Multiple radio button groups in one Angular Reactive form
Issue I see answers for this issue with Template forms. But none that address this scenario with FormGroups in Reactive Forms. When I select a radio button from one form on the page, it deselects the default radio button in
Continue reading[SOLVED] Input change event will not work on input formControl?
Issue <div class="start-time-wrapper"> <input class="form-control" type="text" placeholder="From" [ngxTimepicker]="start" [format]="24" formControlName="startTime" (change)="startTimeChange($event, i)"> startTimeChange(startTime, i){ this.orderForm.value.date[i].time.endTime = this.addMinutes(startTime); console.log(this.orderForm.value); } createItem(): FormGroup { return this.formBuilder.group({ date: [”], time: this.formBuilder.group({ startTime: [”], endTime: [”], }), }); } addItem(): void { this.date =
Continue reading[SOLVED] How to make a Disabled Input also Required with Angular Reactive Form?
Issue I have an input which will be populated when the user clicks on a dialog. So for this I had to make it disabled, because I don’t want the user to manually input the value. The only problem is
Continue reading[SOLVED] How to patch or set value for particular input field in angular reactive forms
Issue Working on reactive nested forms where initially data is null because data is coming for some fields from the dialog box(when dialog box is closed.) I need to set values for the particular fields of the form when data
Continue reading[SOLVED] How to validate password and confirm password using angular 12 material?
Issue I would like a lot of help from you. I’m not able to validate the password field and confirm password using angular material in version 12. I’m using this structure below in html. <div> <mat-form-field> <mat-label>Password</mat-label> <input matInput type="password"
Continue reading