Category : angular-forms

I’m running into a weird issue with my form in Angular 11. I have a basic form configured, with a child component that is 2-way bound, like this: <form [formGroup]="form" (ngSubmit)="onSave()"> <input type="text" formControlName="randomString" /> <color-picker formControlName="primaryColor" [(color)]="primaryColor"></color-picker> </form> When I select my color inside my color-picker component, it’s correctly sending back the new hex ..

Read more

I created the following angular async validator class, following the documentation: import { Injectable } from ‘@angular/core’; import { AsyncValidator, AbstractControl, ValidationErrors, } from ‘@angular/forms’; import { XService } from ‘../../pages/x/x.service’; import { Observable, of } from ‘rxjs’; import { map, catchError } from ‘rxjs/operators’; @Injectable() export class UniqueXValidator implements AsyncValidator { constructor( private xService: ..

Read more

I’m new to angular & receiving this error on HTML: Property ‘firstName’ does not exist on type ‘UserModel’.ngtsc(2339) I am not able to solve the error & already tried rebuild,nx serve(failed),restart. (tried: Angular – How to fix 'property does not exist on type' error?) HTML: <body class="main-bg"> {{diagnostic}} <div class="signup-container text-c animated flipInX"> <h3 class="text-whitesmoke">Sign ..

Read more

I want to disable a button on the parent form when the nested child form is invalid. This is the parent form component: <hello name="{{ name }}"></hello> <h2>Complex form with address component</h2> <form #myForm="ngForm"> <div> <label>Firstname:</label> <input type="text" name="firstName" ngModel> </div> <div> <label>Lastname:</label> <input type="text" name="lastName" ngModel> </div> <address></address> </form> <div> Root group valid: {{ ..

Read more

I am writing my own custom validators and got some to work but this one I did not: validator: import {AbstractControl, ValidatorFn} from ‘@angular/forms’; import {NgbDate} from ‘@ng-bootstrap/ng-bootstrap’; export function ngbdate(): ValidatorFn { return (formControl: AbstractControl): {[key: string]: any} | null => { return formControl.value instanceof NgbDate ? null : {notNgbDate: true}; }; } applied ..

Read more