Ajout de style

This commit is contained in:
Sébastien André
2020-03-26 15:03:40 +01:00
parent 50785a4914
commit 9d0c5fbfb1
7 changed files with 81 additions and 69 deletions

View File

@@ -2,47 +2,47 @@
<div class="form-group">
<label for="firstname">Firstname</label>
<input type="text" formControlName="firstname" class="form-control"
[ngClass]="{ 'is-invalid': submitted && createCtrls.firstname.errors }" />
<div *ngIf="submitted && createCtrls.firstname.errors" class="invalid-feedback">
<div *ngIf="createCtrls.firstname.errors.required">Firstname is required</div>
<div *ngIf="createCtrls.firstname.errors.minlength">Firstname must have min 3 characters</div>
[ngClass]="{ 'is-invalid': submitted && formCtrls.firstname.errors }" />
<div *ngIf="submitted && formCtrls.firstname.errors" class="invalid-feedback">
<div *ngIf="formCtrls.firstname.errors.required">Firstname is required</div>
<div *ngIf="formCtrls.firstname.errors.minlength">Firstname must have min 3 characters</div>
</div>
</div>
<div class="form-group">
<label for="lastname">Lastname</label>
<input type="text" formControlName="lastname" class="form-control"
[ngClass]="{ 'is-invalid': submitted && createCtrls.lastname.errors }" />
<div *ngIf="submitted && createCtrls.lastname.errors" class="invalid-feedback">
<div *ngIf="createCtrls.lastname.errors.required">Lastname is required</div>
<div *ngIf="createCtrls.lastname.errors.minlength">Lastname must have min 3 characters</div>
[ngClass]="{ 'is-invalid': submitted && formCtrls.lastname.errors }" />
<div *ngIf="submitted && formCtrls.lastname.errors" class="invalid-feedback">
<div *ngIf="formCtrls.lastname.errors.required">Lastname is required</div>
<div *ngIf="formCtrls.lastname.errors.minlength">Lastname must have min 3 characters</div>
</div>
</div>
<div class="form-group">
<label for="email">E-mail</label>
<input type="text" formControlName="email" class="form-control"
[ngClass]="{ 'is-invalid': submitted && createCtrls.email.errors }" />
<div *ngIf="submitted && createCtrls.email.errors" class="invalid-feedback">
<div *ngIf="createCtrls.email.errors.required">E-mail is required</div>
<div *ngIf="createCtrls.email.errors.email">It's not a e-mail</div>
[ngClass]="{ 'is-invalid': submitted && formCtrls.email.errors }" />
<div *ngIf="submitted && formCtrls.email.errors" class="invalid-feedback">
<div *ngIf="formCtrls.email.errors.required">E-mail is required</div>
<div *ngIf="formCtrls.email.errors.email">It's not a e-mail</div>
</div>
</div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" formControlName="username" class="form-control"
[ngClass]="{ 'is-invalid': submitted && createCtrls.username.errors }" />
<div *ngIf="submitted && createCtrls.username.errors" class="invalid-feedback">
<div *ngIf="createCtrls.username.errors.required">Username is required</div>
<div *ngIf="createCtrls.username.errors.minlength">Username must have min 3 characters</div>
[ngClass]="{ 'is-invalid': submitted && formCtrls.username.errors }" />
<div *ngIf="submitted && formCtrls.username.errors" class="invalid-feedback">
<div *ngIf="formCtrls.username.errors.required">Username is required</div>
<div *ngIf="formCtrls.username.errors.minlength">Username must have min 3 characters</div>
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" formControlName="password" class="form-control"
[ngClass]="{ 'is-invalid': submitted && createCtrls.password.errors }" />
<div *ngIf="submitted && createCtrls.password.errors" class="invalid-feedback">
<div *ngIf="createCtrls.password.errors.required">Password is required</div>
<div *ngIf="createCtrls.password.errors.pattern">The pattern of the password ([A-Za-z0-9_-]
[ngClass]="{ 'is-invalid': submitted && formCtrls.password.errors }" />
<div *ngIf="submitted && formCtrls.password.errors" class="invalid-feedback">
<div *ngIf="formCtrls.password.errors.required">Password is required</div>
<div *ngIf="formCtrls.password.errors.pattern">The pattern of the password ([A-Za-z0-9_-]
{{ '{' }}8,15{{ '}' }})</div>
</div>
</div>

View File

@@ -32,22 +32,25 @@ export class CreateUserComponent implements OnInit {
}
ngOnInit() {
this.createForm = this.formBuilder.group({
username: ["", [Validators.required, Validators.minLength(3)]],
password: [
"",
[Validators.required, Validators.pattern("^[A-Za-z0-9_-]{8,15}$")]
],
firstname: ["", [Validators.required, Validators.minLength(3)]],
lastname: ["", [Validators.required, Validators.minLength(3)]],
email: ["", [Validators.required, Validators.email]]
});
this.createForm = this.formBuilder.group(
{
username: ["", [Validators.required, Validators.minLength(3)]],
password: [
"",
[Validators.required, Validators.pattern("^[A-Za-z0-9_-]{8,15}$")]
],
firstname: ["", [Validators.required, Validators.minLength(3)]],
lastname: ["", [Validators.required, Validators.minLength(3)]],
email: ["", [Validators.required, Validators.email]]
},
{ updateOn: "submit" }
);
// get return url from route parameters or default to '/'
this.returnUrl = this.route.snapshot.queryParams["returnUrl"] || "/";
}
get createCtrls() {
get formCtrls() {
return this.createForm.controls;
}
@@ -62,11 +65,11 @@ export class CreateUserComponent implements OnInit {
}
let createUser = new User();
createUser.login = this.createCtrls.username.value;
createUser.password = this.createCtrls.password.value;
createUser.firstName = this.createCtrls.firstname.value;
createUser.lastName = this.createCtrls.lastname.value;
createUser.email = this.createCtrls.email.value;
createUser.login = this.formCtrls.username.value;
createUser.password = this.formCtrls.password.value;
createUser.firstName = this.formCtrls.firstname.value;
createUser.lastName = this.formCtrls.lastname.value;
createUser.email = this.formCtrls.email.value;
this.authenticationService
.create(createUser)