This can be achieved with the sample presented here, where you can make use of NgForm directive: <form [formGroup]=”heroForm” #formDir=”ngForm”> and then in your validation messages just check if the form is submitted: <small *ngIf=”heroForm.hasError(‘required’, ‘formCtrlName’) && formDir.submitted”> Required! </small> EDIT: Now is also { updateOn: ‘submit’} is provided, but that works only if you … Read more
You can do only using html: <md-input-container class=”md-icon-float md-block” flex-gt-sm> <label>Email</label> <input md-input id=”contact-email” type=”text” ngControl=”email” #email=”ngForm” [(ngModel)]=”contact.email” required pattern=”^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,6})+$”> <div class=”md-errors-spacer” [hidden]=”email.valid || email.untouched”> <div class=”md-char-counter” *ngIf=”email.errors && email.errors.required”> Email is required </div> <div class=”md-char-counter” *ngIf=”email.errors && email.errors.pattern”> Email is invalid </div> </div> </md-input-container>
Validators.required does the magic for you: // using required this.formGroup = this.formBuilder.group({ taskTreeId: [Common.UID()], executionProgrammedTime: [“”, [Validators.required]], description: [“”], tasks: this.formBuilder.array([], Validators.required) }); // using custom validation export const minLengthArray = (min: number) => { return (c: AbstractControl): {[key: string]: any} => { if (c.value.length >= min) return null; return { MinLengthArray: true}; } } … Read more
EDIT: This answer was for older Angular versions. See pasek’s answer below for a much more succinct approach in Angular v12+. Angular doesn’t really provide a great, clean way to do this, but it is possible. I think the validators are stored in a service that is injected into the FormBuilder(NG_VALIDATORS), and I’m going to … Read more
The Angular mat-select compares by reference between that object and all the available objects in the mat-select. As a result, it fails to select the items you have set in the category field. Consequently, you have to implement the compare function to compare any of the list items’ attributes as you want, and then pass … Read more
This is actually really easy to do in the final release. Took me a while to wrap my head around it because most information about it that I’ve come across is outdated. Posting my solution here in case anyone else is struggling with this. import { Component, ElementRef, Input, ViewChild } from ‘@angular/core’; import { … Read more
When we create new FormControl/FormGroup/FormArray(AbstractControl) – coerceToValidator is called. function coerceToValidator( validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null): ValidatorFn| null { const validator = (isOptionsObj(validatorOrOpts) ? (validatorOrOpts as AbstractControlOptions).validators : validatorOrOpts) as ValidatorFn | ValidatorFn[] | null; return Array.isArray(validator) ? composeValidators(validator) : validator || null; } export function composeValidators(validators: Array<Validator|Function>): ValidatorFn|null { return validators … Read more
you Just need to import these to remove your error. You are getting runtime error because Observables by default come with just a few operators. You have to explicitly import them like this – import ‘rxjs/add/operator/debounceTime’; import ‘rxjs/add/operator/map’; Working example Update Angular 6 onwards, debounceTime is imported as following – import { debounceTime } from … Read more
You can use addControl method of FormGroup class as per documentation So you can do as below : this.myForm.addControl(‘newcontrol’,[]);
The code below does not work with pure ngModel binding, so I did a lot of experiments. Latest, also confirmed by Maximillian Schwarzmuller should be the one: @Directive({ selector: ‘[ngModel], [formControl]’, // or ‘input, select, textarea’ – but then your controls won’t be handled and also checking for undefined would be necessary }) export class … Read more