File
Implements
Constructor
constructor(userService: UserService, spinner: NgxSpinnerService, formBuilder: FormBuilder, toastr: ToastrService)
|
|
|
Parameters :
| Name |
Type |
Optional |
| userService |
UserService
|
No
|
| spinner |
NgxSpinnerService
|
No
|
| formBuilder |
FormBuilder
|
No
|
| toastr |
ToastrService
|
No
|
|
import { Component, OnInit } from '@angular/core';
import { AuthenticationService } from '../services/authentication.service';
import { UserService } from '../services/user.service';
import { AlertService } from '../services/alert.service';
import { NgxSpinnerService } from 'ngx-spinner';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { first } from 'rxjs/operators';
import { ToastrService } from 'ngx-toastr';
@Component({
selector: 'app-user-profile',
templateUrl: './user-profile.component.html',
styleUrls: ['./user-profile.component.css']
})
export class UserProfileComponent implements OnInit {
id: number;
firstName: string;
lastName: string;
username: string;
updateForm: FormGroup;
passwordValue: string;
constructor(private userService: UserService,
private spinner: NgxSpinnerService,
private formBuilder: FormBuilder,
private toastr: ToastrService) {
}
ngOnInit(): void {
this.id = JSON.parse(localStorage.getItem('currentUser')).id;
this.firstName = JSON.parse(localStorage.getItem('currentUser')).firstName;
this.lastName = JSON.parse(localStorage.getItem('currentUser')).lastName;
this.username = JSON.parse(localStorage.getItem('currentUser')).username;
this.updateForm = this.formBuilder.group({
firstName: ['', Validators.required],
lastName: ['', Validators.required],
username: ['', Validators.required],
password: ['', Validators.required, Validators.minLength(6)]
});
}
updateUser() {
this.spinner.show();
this.updateForm = this.formBuilder.group({
firstName: [this.firstName, Validators.required],
lastName: [this.lastName, Validators.required],
username: [this.username, Validators.required],
password: [this.passwordValue, Validators.required],
});
if (this.updateForm.invalid) {
this.toastr.error('Form is invalid!');
this.spinner.hide();
}
else if (this.updateForm.controls['username'].value === ' '){
this.toastr.error('Nice try ;)');
this.spinner.hide();
}
else if (this.passwordValue.length < 6) {
this.toastr.error('Password must have more than 6 characters');
this.spinner.hide();
}
else {
this.userService.put(this.id, this.updateForm.value)
.pipe(first())
.subscribe(
data => {
this.toastr.success('Update successful');
this.spinner.hide();
},
error => {
this.toastr.warning('Update error');
this.spinner.hide();
});
}
}
}
<div class="page-header pb-10 page-header-dark bg-primary">
<div class="container-fluid">
<div class="page-header-content">
<h1 class="page-header-title">
<div class="page-header-icon"><i class="fas fa-user"></i></div>
<span>User Profile</span>
</h1>
<div class="page-header-subtitle">Your personal details</div>
</div>
</div>
</div>
<ngx-spinner bdOpacity=0.5 bdColor="rgba(51,51,51,0.85)" size="medium" color="#fff" type="line-scale" [fullScreen]="true">
<p style="color: white"> Updating user... </p>
</ngx-spinner>
<div class="container mt-n10">
<div class="card-deck">
<div class="card mb-4">
<div class="card-header">
<ul class="nav nav-pills card-header-pills" id="cardPill" role="tablist">
<li class="nav-item"><a class="nav-link active" id="overview-pill" href="#overviewPill" data-toggle="tab" role="tab" aria-controls="overview" aria-selected="true">User details</a></li>
</ul>
</div>
<div class="card-body">
<div class="tab-content" id="cardPillContent">
<div class="tab-pane fade show active" id="overviewPill" role="tabpanel" aria-labelledby="overview-pill">
<div class="row" style="text-align: center; justify-content: center;">
<form [formGroup]="updateForm" (ngSubmit)="updateUser()">
<div class="form-group">
<label for="exampleFormControlInput1">First Name</label>
<input class="form-control" [(ngModel)]="firstName" type="text" [ngModelOptions]="{standalone: true}" required>
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Last Name</label>
<input class="form-control" [(ngModel)]="lastName" type="text" [ngModelOptions]="{standalone: true}" required>
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Username</label>
<input class="form-control" [(ngModel)]="username" type="text" [ngModelOptions]="{standalone: true}" required>
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Password</label>
<input class="form-control" [(ngModel)]="passwordValue" type="password" minlength="6" [ngModelOptions]="{standalone: true}" required>
</div>
<br>
<button class="btn btn-outline-primary"><i class="far fa-save"></i> Save Changes</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Legend
Html element with directive