Please check the code on : https://stackblitz.com/edit/angular-form-dirty-and-form-valid-check
It is a simple code :
HTML :
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
registerForm: FormGroup = new FormGroup({
email: new FormControl(null, [Validators.required, Validators.email])
})
}
TS FILE :
<form [formGroup]="registerForm" (ngSubmit)="registerNew()" class="text-center">
<label for="email">Email</label>
<input
[class.is-invalid]="registerForm.get('email').invalid && registerForm.get('email').touched"
type="text" id="email" formControlName="email" class="form-control">
<br>
<small *ngIf="registerForm.get('email').valid &&
registerForm.get('email').dirty">
Valid Email ID
</small>
</form>
In this there seems to be a problem.
when I type the email : "a@gmail" without ".com", then also its shows the tag saying that the email is valid.
Is is incorrect functionality or am I missing something here?