Angular custom directive not working on input pattern

Issue I’m trying to set a regex pattern with a custom Angular directive: import { Directive, ElementRef } from ‘@angular/core’; @Directive({ selector: ‘[appPasswordRegex]’, }) export class PasswordRegexDirective { constructor(private el: ElementRef) { this.el.nativeElement.pattern = ‘^(?=.*?[a-zA-Z])(?=.*?[0-9]).*$’; } } HTML: <input appPasswordRegex

Continue reading

Can't bind to 'formControl' since it isn't a known property of 'input' – Angular2 Material Autocomplete issue

Issue I am trying to use Angular Material Autocomplete component in my Angular 2 project. I added the following to my template. <md-input-container> <input mdInput placeholder=”Category” [mdAutocomplete]=”auto” [formControl]=”stateCtrl”> </md-input-container> <md-autocomplete #auto=”mdAutocomplete”> <md-option *ngFor=”let state of filteredStates | async” [value]=”state”> {{

Continue reading

Can't bind to 'formControl' since it isn't a known property of 'input' – Angular2 Material Autocomplete issue

Issue I am trying to use Angular Material Autocomplete component in my Angular 2 project. I added the following to my template. <md-input-container> <input mdInput placeholder=”Category” [mdAutocomplete]=”auto” [formControl]=”stateCtrl”> </md-input-container> <md-autocomplete #auto=”mdAutocomplete”> <md-option *ngFor=”let state of filteredStates | async” [value]=”state”> {{

Continue reading

Set form control to dirty in angular test

Issue I have the following component template: <div> <mat-checkbox [(ngModel)]="model.value" required="true" #checkbox="ngModel">{{model.title}}</mat-checkbox> <mat-error *ngIf="checkbox.invalid && checkbox.dirty">Some Error</mat-error> </div> And in my test I would like to test the the error state is shown. However I need to access the input

Continue reading

Angular – FormArrayName in subcomponents

Issue I have three components: consent consent-scope-list consent-scope-item consent hosts a FormGroup which contains two FormArrays. consentForm = this.fb.group({ identityScopes: this.fb.array([]), resourceScopes: this.fb.array([]) }); get identityScopes(): FormArray { return this.consentForm.get(“identityScopes”) as FormArray; } get resourceScopes(): FormArray { return this.consentForm.get(“resourceScopes”) as

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

I need to convert one of the form arrray in my formGroup

Issue This is my ngOnInit ngOnInit() { this.formGroup = this._formBuilder.group({ basic: this._formBuilder.array([this.basicGroup()]), experience: this._formBuilder.array([this.experienceGroup()]), education: this._formBuilder.array([this.educationGroup()]), skills: this._formBuilder.array([this.skillsGroup()]), contact: this._formBuilder.array([this.contactGroup()]), summary: this._formBuilder.array([this.summaryGroup()]), }); then I pass values of form group to params and print it on console. In my console

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

Angular 2+ Custom form validation breaks the form methods

Issue I have a form: public buildUserForm(user: User = null): void { this.selectedUserForm = this.fb.group({ id: 0, isActive: [true], isSuperUser: [null], firstName: [”, Validators.required], lastName: [”, Validators.required], username: [”, [Validators.required, UniqueNameValidator(this.userNamesList, user)]], password: [”, Validators.pattern(‘^(?=[^A-Z]*[A-Z])(?=[^a-z]*[a-z])(?=\\D*\\d)[A-Za-z\\d!$%@#£€*?&]{8,}$’)], emailAddress: [”, Validators.email], businessEmailAddress: [”,

Continue reading

Angular formGroup inside formArray, formGroup is invalid, but `formArray.valid` is true

Issue this is my primary code: get emailFormArray() { return this.formGroup.get(“emails”) as FormArray; } public ngOnInit() { this.formGroup = this.formBuilder.group({ emails: this.formBuilder.array([]), }); this.addEmailFormGroup(); } public addEmailFormGroup() { this.emailFormArray.controls.push( this.formBuilder.group({ email: [”, Validators.email], }), ); } and in my template

Continue reading

ControlValueAccessor ngModel not being updated

Issue This is simple custom form control @Component({ selector: ‘app-custom-control’, template: ` {{ value }} <input [ngModel]=”value” (ngModelChange)=”onChange($event)”> `, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CustomControlComponent), multi: true, }] }) export class CustomControlComponent implements ControlValueAccessor { private value: any;

Continue reading

Access form inside ng-template in a template driven form

Issue <form #f="ngForm"> <ng-container *ngTemplateOutlet="template"></ng-container> {{f.controls.formInput.value}} // gives error <ng-template #template> <div class="reusable-control"> <input ngModel name="formInput"> </div> </ng-template> </form> As you can see, I’m accessing formInput after the ng-container but getting an error. What am I doing wrong? Solution By

Continue reading

Angular – ngValue is not binding

Issue ngValue will not bind the value unless you keep the reference of the same list. Is it correct? This will not work: this.myForm.get(‘user’).patchValue(this.currentUser); This will work: const findIndex = this.user.findIndex( (item) => item.id == this.currentUser.id ); this.myForm.get(‘user’).patchValue(this.user[findIndex]); Also, I

Continue reading

How to set value to Form in Angular using FormControl

Issue <div class=”form-group” [formGroup]=”gGroup”> <label for=”grouplabel”>Group</label> <select formControlName=”groupControl” [(ngModel)]=”groupobj” (ngModelChange)=”onSelectGroup($event)” id=”group” class=”form-control”> <option>Select</option> <option *ngFor=”let group of groups” [selected]=”current_group === group.name”>{{group.name}}</option> </select> </div> How can I set the value of the <select> field to Select dynamically in the Component? I

Continue reading

How to validate custom input textbox in angular 7

Issue I am trying to show template driven validate error message for custom textbox in angular 7 but not working.Anyone can find the issue?how to resolve this issue? Demo:https://stackblitz.com/edit/angular-7-template-driven-form-validation-yzcwqc?file=app%2Fapp.component.html app.component.html: <div class=”form-group”> <label for=”firstName”>First Name</label> <app-textbox type=”text” name=”firstName” [(ngModel)]=”model.firstName” #firstName=”ngModel”

Continue reading