Looking for a method to display client-side errors when a user attempts to submit a form? By checking the validators and highlighting input fields with a red box if they do not meet validation criteria, you can provide a clear indication of the error. What is the most effective approach to achieve this and how should it be done?
html
<button type="button" class="btn-u pull-right margin-bottom-10" data-toggle="modal" data-target="#myModal"><span class="fa fa-plus" aria-hidden="true"></span> Invite User</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Invite User</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id='myForm' role="form" [ngFormModel]="InviteUserForm">
<div class="input-group margin-bottom-20">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input type="text" [(ngModel)]='inviteUser.username' class="form-control" ngControl="username">
</div>
<div class="input-group margin-bottom-20">
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
<input type="email" required [(ngModel)]='inviteUser.email' class="form-control" ngControl="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$">
</div>
<div class="input-group margin-bottom-20">
<span class="input-group-addon"><i class="fa fa-glass"></i></span>
<select [(ngModel)]='inviteUser.partnerId' class="form-control" ngControl="partner">
<option>Select one</option>
<option *ngFor="let partner of _partners" value={{partner.Id}}>
{{partner.Name}}
</option>
</select>
</div>
</form>
<button type="button" class="btn-u btn-u-default margin-right-5" data-dismiss="modal">Close</button>
<button type="button" [disabled]="!InviteUserForm.valid" class="btn-u pull-right" (click)="Invite(inviteUser)" data-dismiss="modal">Invite</button>
</div>
</div>
</div>
</div>component
import { Component, Inject } from '@angular/core';
import { NgForm } from '@angular/forms';
import { FORM_PROVIDERS, ControlGroup, FormBuilder, Validators, Control} from '@angular/common';
import {UserService} from '../../services/user.service';
import {OnInit} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import { Router } from '@angular/router';
import { HttpHelper} from '../../utils/httphelper.utils';
import 'rxjs/Rx';
import {InviteModel} from '../../models/invite.model';
import {LocalStorageService} from '../../services/localStorage.service';
@Component({
selector: 'invite-user',
templateUrl: '../../app/components/user/invite-user.html',
providers: [UserService, HttpHelper, LocalStorageService]
})
export class InviteUserComponent {
InviteUserForm: ControlGroup;
private _partners: Observable<any[]>;
private name: string;
private email: string;
private partner: number;
private _data: Observable<any[]>;
inviteUser: InviteModel;
constructor(
@Inject(FormBuilder) public formBuilder: FormBuilder,
@Inject(UserService) private _userService: UserService,
@Inject(LocalStorageService) private _localStorageService: LocalStorageService) {
this.inviteUser = new InviteModel();
this.InviteUserForm = this.formBuilder.group({
'username': new Control('', Validators.required),
'email': new Control('', Validators.compose([Validators.pattern('[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$'), Validators.required])),
'partner': new Control('', Validators.required)
});
}
ngOnInit() {
this._userService.partners()
.subscribe(data => this._partners = data,
error => {
console.log("error while retriving partners");
this._userService.handleError(error);
}
);
}
Invite(inviteUser) {
console.log(inviteUser);
this._userService.inviteUser(inviteUser)
.subscribe(data => {
console.log(data);
this._data = data;
this.inviteUser = new InviteModel();
},
error => {
console.log("error while retriving partners");
this._userService.handleError(error);
},
() => {
this._localStorageService.setValue('notifications', 'Info Are You sure to Delete this Entry');
this.inviteUser = new InviteModel();
}
);
}
}