Angular 6 Form Array cannot be accessed inside an ng-container

Issue I have an ng-container that describes all of my possible form field templates, essentially on a large switch statement depending on the field’s metadata: <ng-template #dynamicFormField let-field=”inputField”> <div *ngIf=”field.dataTypeName == ‘ShortText'”> <mat-form-field class=”col-md-6″> <input matInput type=”text” [placeholder]=”field.attributeLabel” [formControlName]=”field.attributeName”> </mat-form-field>

Continue reading

Angular Reactive Form submit and clear validation

Issue I have a reactive form <form [formGroup]=”secondFormGroup”> <ng-template matStepLabel>enter items</ng-template> <div style=”display: flex; flex-direction: column;”> <mat-form-field> <input matInput type=”text” placeholder=”category” [(ngModel)]=”newItem.CategoryName” formControlName=”category” /> </mat-form-field> <mat-form-field> <input matInput type=”text” placeholder=”sub category” [(ngModel)]=”newItem.SubCategoryName” formControlName=”subCategory” /> </mat-form-field> <mat-form-field> <input matInput type=”text” placeholder=”product”

Continue reading

Cannot find control with name:

Issue I have a quite complicated form which I want to break down into individual components. Here is my base form (only taken example fields), I’m using FormBuilder: ngOnInit() { this.predictorQuestion = this.fb.group({ question: [”, Validators.required], options: this.fb.array([ this.fb.control(”, Validators.required),

Continue reading

How can avoid the use of ngModel

Issue I’ve been stuck on something for hours and I need some help. I’m pretty new to angular. I’m working with the reactive forms, showing my code and explaining what I want to accomplish. <mat-form-field> <mat-select [(ngModel)]="filterCate" placeholder="Cate" type="search" aria-label="Search"

Continue reading

When using a custom validator, formBuilder.group is displayed as deprecated

Issue I have built my PasswordValidator as follows: // Function to compare password with confirmPassword export function ConfirmedValidator(controlName: string, matchingControlName: string) { return (formGroup: FormGroup) => { const control = formGroup.controls[controlName]; const matchingControl = formGroup.controls[matchingControlName]; if (matchingControl.errors && !matchingControl.errors.confirmedValidator) {

Continue reading

FormBuilder with strongly typed form in ng14

Issue I have the following form: const enum Fields { FirstName = ‘firstName’, LastName = ‘lastName’ } interface FormType { [Fields.FirstName]: FormControl<string | null>; [Fields.LastName]: FormControl<string | null>; } public form!: FormGroup<FormType>; this.form = new FormGroup({ [Fields.FirstName]: new FormControl(null, {

Continue reading

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

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

Custom Validator in Angular Reactive Forms not working

Issue I have a custom validator on the field postalCode: function postalCodeValidator(): ValidatorFn { return (control: AbstractControl): ValidationErrors | null => { if (!this.contactForm) { return null; } const isPotalCodeRequired = this.contactForm.get( ‘isPotalCodeRequired’ ).value; if (isPotalCodeRequired && !control.value) { console.log(‘here’);

Continue reading

Angular FormArray

Issue I m not able to access the FormArray in Angular 13.3. its showing this error in console. I have one form group, inside that I have 2 more form groups and 1 form array. core.mjs:6485 ERROR Error: Cannot find

Continue reading

Error: NG0301: Export of name 'ngModel' not found

Issue So I’m trying to add a simple validation message. App.Module.ts import { FormsModule, ReactiveFormsModule } from ‘@angular/forms’; @NgModule({ … imports: [ FormsModule, ReactiveFormsModule, ] }) HTML <div class="form-group"> <label>Nickname</label> <input type="text" class="form-control" id="nickname" formControlName="nickname" [(ngModel)]="MyProfileForm.nickname" name="nickname" #nickname="ngModel"> <div [hidden]="nickname.valid"

Continue reading

How to find the invalid controls in Angular(v2 onwards) reactive form

Issue I have a reactive form in Angular like below: this.AddCustomerForm = this.formBuilder.group({ Firstname: [”, Validators.required], Lastname: [”, Validators.required], Email: [”, Validators.required, Validators.pattern(this.EMAIL_REGEX)], Picture: [”], Username: [”, Validators.required], Password: [”, Validators.required], Address: [”, Validators.required], Postcode: [”, Validators.required], City: [”, Validators.required],

Continue reading

FormGroup is deprecated

Issue I’ve already seen some related question & answers, but unfortunately those didn’t help me much. ngOnInit(): void { this.form = this.fb.group({ newPassword: [”, [Validators.required, Validators.minLength(6), Validators.maxLength(12)]], confirmPassword: [”], }, {validators: this.checkPasswords(this.form)}); } checkPasswords(group: FormGroup) { let pass = group.controls.password.value;

Continue reading

How to disable all FormControls inside a FormGroup

Issue I have this reactive Angular Form structure: myForm: FormGroup; Personal: FormGroup; FIRST_NAME: FormControl; LAST_NAME: FormControl; ngOnInit(): void { this.createFormControls(); this.createForm(); } createFormControls() { this.FIRST_NAME = new FormControl(”, [Validators.required]); this.LAST_NAME = new FormControl(”, [Validators.required]); } createForm(): void { this.myForm =

Continue reading

Set and update validation on form array in reactive forms

Issue In angular 4 i am creating a form that has a form array like so this.formBuilder.group({ name: [”, [Validators.required, Validators.minLength(3)]], required:false, selectType: [”, [Validators.required]], items: this.formBuilder.array([this.buildItems()]) }) … buildItems() { return this.formBuilder.group({ name: [”, [Validators.required]] }); This builds the

Continue reading

Set and update validation on form array in reactive forms

Issue In angular 4 i am creating a form that has a form array like so this.formBuilder.group({ name: [”, [Validators.required, Validators.minLength(3)]], required:false, selectType: [”, [Validators.required]], items: this.formBuilder.array([this.buildItems()]) }) … buildItems() { return this.formBuilder.group({ name: [”, [Validators.required]] }); This builds the

Continue reading

How to perform validation in reactive form with nested form arrays in table with angular?

Issue Stackblitz link: https://stackblitz.com/edit/angular-ivy-bafyye?file=src/app/components/user-details/user-details.component.ts I have created nested reactive form for user’s car details as below: user-details.component.ts export interface User { name: string; car: Cars[]; } export interface Cars { id: Number; company: CarCompany; model: CarModel; parts: CarPartName[]; registrationAndBillingDate: RegistrationAndBillingDate[];

Continue reading

How to perform validation in reactive form with nested form arrays in table with angular?

Issue Stackblitz link: https://stackblitz.com/edit/angular-ivy-bafyye?file=src/app/components/user-details/user-details.component.ts I have created nested reactive form for user’s car details as below: user-details.component.ts export interface User { name: string; car: Cars[]; } export interface Cars { id: Number; company: CarCompany; model: CarModel; parts: CarPartName[]; registrationAndBillingDate: RegistrationAndBillingDate[];

Continue reading