Develop Reference

Template driven validation in angular 7

I try to validate custom text box by template driven in angular 7 but not working.also i am not able to find this related question in google also..So any genius can resolve this issue?
https://stackblitz.com/edit/angular-hhgkje?file=app%2Fapp.component.html
<my-textbox type="text" class="form-control" name="firstName"
[(ngModel)]="model.firstName" #firstName="ngModel" required></my-textbox>
<div *ngIf="f.submitted && firstName.invalid" class="invalid-feedback">
<div *ngIf="firstName.errors.required">First Name is required</div>
</div>

Angular - Template driven form - Email validation not happening

I am making a simple template-driven form with 'Email Validation' in it (Not by Reactive Forms). So, required, minlength, maxlength are working fine. But, when I try email to be valid, its failing. Can someone help me out?
abc.component.html
<form #customForm="ngForm" (ngSubmit)="alpha(customForm)">
<input type="text" name="firstName" ngModel #firstName ="ngModel" required minlength="3" maxlength="10"><br/>
<div *ngIf="firstName.touched">
<p *ngIf="firstName.errors?.required">First Name is Required!!!</p>
<p *ngIf="firstName.errors?.minlength">First Name minimum 3 characters are required!!!</p>
<p *ngIf="firstName.errors?.maxlength">First Name max length is 10!!!</p>
</div>
<input type="email" name="email" ngModel #email="ngModel" required><br/>
<div *ngIf="email.touched">
<p *ngIf="email.errors?.required">Email is a required field!</p>
<p *ngIf="email.errors?.email">This is not a valid Email!!!</p>
</div>
<button type="submit" [disabled]="customForm.invalid">Submit</button>
</form>
Note: Though required validation of email is taking place, but as the
pattern or data entered is not correct, the 2nd validation in email
validation div must give error.
Result: (Email valid and its pattern not automatically giving error)

You could add an email attribute to your Email Input. But then that would not in-validate it for something of the pattern xxx#xxx which I think would not be a valid email in your case.
I suggest you use pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$" instead. Then, where you're showing the error message, you should check for email.errors?.pattern instead.
Give this a try:
<input
type="email"
name="email"
ngModel
#email="ngModel"
pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$"
required>
<br/>
<div *ngIf="email.touched">
<p *ngIf="email.errors?.required">Email is a required field!</p>
<p *ngIf="email.errors?.pattern">This is not a valid Email!!!</p>
</div>
Try both the approaches on this Sample StackBlitz and use the one that suits you better.

Replace this line
<input type="email" name="email" ngModel #email="ngModel" required>
with
<input type="email" name="email" ngModel #email="ngModel" required email>// add email attribute

use "pattern = regrex" in input tag and use validation email?.errors?.pattern

How to enable a button once all form fields pass

My first Angular 5 app.
I've read through: https://angular.io/guide/form-validation and several pages I googled to find the answer, only to find that they're all really out of date.
I have multiple input boxes on my form like:
<form name="pizzaPlaceForm" class="form-container">
<mat-form-field>
<input matInput placeholder="Shop Name" [(ngModel)]="pizzaPlace.shopName"
id="shopName" name="shopName" #shopName="ngModel"
required minlength="4">
<mat-error>You must provide a shop name at least 4 characters in length.</mat-error>
</mat-form-field>
<br/>
<mat-form-field>
<input matInput placeholder="Contact Name" [(ngModel)]="pizzaPlace.contactName"
id="contactName" name="contactName" #contactName="ngModel"
required minlength="4">
<mat-error>You must provide a contact name at least 4 characters in length.</mat-error>
</mat-form-field>
</form>
Now I want to control the disabled state of my button and only enable it when all of the required fields have been entered, like:
<button mat-raised-button disabled="pizzaPlaceForm.$invalid" (click)="onCreateClick()" *ngIf="createMode">Create</button>
Only it doesn't appear that $invalid works any more, so how do I do this with Angular 5?

you want to disable the button if the form is not valid. so you can try below
<button mat-raised-button [disabled]="!pizzaPlaceForm.valid" (click)="onCreateClick()" *ngIf="createMode">Create</button>

Add an identifier for the form with an ngForm. Then you can disabled the submit button
with [disabled] attribute.
[disabled]="pizzaPlace.form.invalid" OR [disabled]="pizzaPlace.invalid"
<form #pizzaPlace="ngForm" name="pizzaPlaceForm" class="form-container">
<button mat-raised-button [disabled]="pizzaPlace.form.invalid" (click)="onCreateClick()" *ngIf="createMode">Create</button>
</form>

Angular 4: mismatch input fields with error message

I want to compare password field and confirm password without creating a new directive, just using ngModel and HTML. I have a submit button blocked if the passwords don't match, and thats working fine. But I want to show a span error message when the user is retyping (or on submit) and so far, right after the first input on the password field (when the retype is empty) I get the error message. It's logical, with the code I have, but I wonder if it's possible to have a better UX without using validators or directives? I've tried several aproaches but nothing worked...Any hint would be appreciated. The code:
<form #confirm="ngForm" novalidate>
<mat-form-field class="full-width">
<input matInput type="password" id="password" placeholder="New Password" name="password"
[(ngModel)]="loginValues.password" required>
</mat-form-field>
<mat-form-field class="full-width">
<input matInput type="password" id="confirmPassword" placeholder="Retype Password" name="confirmPassword"
[(ngModel)]="loginValues.confirmPassword" required>
</mat-form-field>
<!--Error Message-->
<span *ngIf="loginValues.confirmPassword !== loginValues.password">{{ 'login.password_not_match' | translate }}</span>
<div class="child-padding-top no-side-padding" fxLayoutAlign="end center" >
<button class="button-login-register" [disabled]="loginValues.password !== loginValues.confirmPassword" mat-button color="primary"
(click)="clientNewPassword()" >{{ 'login.SUBMIT' | translate }}</button>
</div>
</form>

You should not use a span for *ngIf, unless you are using the span for a purpose (add a class to it, etc.). But it seems you are just using that to hold your *ngIf statement, since *ngIf has to be tagged to an element. If you're going to do this, you should instead use
<ng-container *ngIf=""></ng-container>.
To answer your question, the only thing that I think you can do without applying validation, is to add more logic. For example you could do:
<ng-container* ngIf="loginValues.confirmPassword !== loginValues.password
&& loginValues.confirmPassword.length > 0
&& loginValues.password.length > 0 ">
{{ 'login.password_not_match' | translate }}
</ng-container>
Basically what you're doing is changing it so that the error is not always shown when the passwords don't match, but instead the user has to have filled out both inputs first. There's other things you could do. For example you could use ngTouched/ngDirty, etc. You can set up the rules as you like them.

AngularJS / JQuery - form input without an associated label

I have a problem with "Form input without an associated label". This appears on [textarea], [select], [select], [input] classes.
Here is my code:
<div class="panel-body">
<form name="f" data-ng-submit="addTodo()">
Nazwa:
<textarea class="form-control" name="newTodo" data-ng-model="formData.newTodo" required></textarea>
Typ:
<select class="form-control" name="type" data-ng-model="formData.type" data-ng-option="value.name for value in categories" required></select>
Estymowany czas:
<select class="form-control" name="estimates" data-ng-model="formData.estimates" data-ng-option="value + 'h' for value in [] | rangeTime:9:true" required></select>
Data:
<input class="form-control" type="text" data-ng-model="formData.date" data-ng-data-picker="" name="date" required readonly="readonly">
<br />
<button class="btn btn-success" data-ng-disabled="f.$invalid">Add <span class="glyphicon glyphicon-ok"></span></button>
</form>
Thanks for help!
Moderator Clarification: The quoted message stated above is a warning provided by JetBrains products within the IDE. The OP is most likely using either
WebStorm or IntelliJ for front-end development.

This is not an error, however it's recommended to associate labels with corresponding form elements for the sake of UX convenience. For example for the name field:
<label for="name">Nazwa:</label>
<textarea class="form-control" id="name" name="newTodo" data-ng-model="formData.newTodo" required></textarea>
I assume your IDE is smart enough to identify missing labels and provide you with a reasonable suggestion to add those.

I guess WebStorm?
just follow the advice and add the label.
label is useful especially for radio, checkbox so that you can active them by merely clicking on the label.