CRUD Angular App - forms

Question

its a crud app i am inputting user info into a form and then saving it in an array and then rendering it into a table .I can add more rows with different user data . And i can delete a certain row from the table . I also have a edit button but i don't have no idea how to do that.
Register.html file
<div class="container">
<h2 class="page-header">Register</h2>
<form (ngSubmit)="onRegisterSubmit()" [formGroup] = "form">
<div class="form-group">
<label>Full Name</label>
<input type="text" [(ngModel)]="fullname" formControlName="fullname" class="form-control" >
</div>
<div class="form-group">
<label>Username</label>
<input type="text" [(ngModel)]="username" formControlName="username" class="form-control" >
</div>
<div class="form-group">
<label>Email</label>
<input type="text" [(ngModel)]="email" formControlName="email" class="form-control" >
</div>
<div class="form-group">
<label>Password</label>
<input type="password" [(ngModel)]="password" formControlName="password" class="form-control">
</div>
<input type="submit" class="btn btn-primary" value="Submit" [disabled]="!form.valid">
</form>
<br>
<br>
<table border="2" class="table table-striped">
<tr>
<th>Full Name</th>
<th>Username</th>
<th>Email</th>
<th>Password</th>
<th>Delete</th>
<th>Edit</th>
</tr>
<div > </div>
<tr *ngFor="let user of userDetails">
<td>{{user.username}}</td>
<td>{{user.username}}</td>
<td>{{user.email}}</td>
<td>{{user.password}}</td>
<td><button (click)="userDelete()">X</button></td>
<td><button (click)="userEdit()">Edit</button></td>
</tr>
</table>
</div>
Register.ts file
export class RegisterComponent implements OnInit {
fullname : string;
username : string;
email : string;
password : string;
userDetails:Array<object>;
constructor(
private validateService: ValidateService,
private flashMessage:FlashMessagesService)
{ }
form;
ngOnInit() {
this.userDetails=[];
this.form = new FormGroup({
fullname : new FormControl("", Validators.required),
username : new FormControl("", Validators.required),
email : new FormControl("", Validators.required),
password : new FormControl("", Validators.required)
});
}
onRegisterSubmit(){
let user = {
fullname : this.fullname ,
username : this.username,
email : this.email ,
password : this.password
}
this.userDetails.push(user);
if(!this.validateService.validateRegister(user)){
this.flashMessage.show('Please fill in all fields', {cssClass: 'alert-danger', timeout: 3000});
return false;
}
// Validate Email
if(!this.validateService.validateEmail(user.email)){
this.flashMessage.show('Please use a valid email', {cssClass: 'alert-danger', timeout: 3000});
return false;
}
}
userDelete(){
this.userDetails.pop();
}
userEdit(){
//No logic
}
}
Validation service file
export class ValidateService {
constructor() { }
validateRegister(user){
if(user.fullname == undefined || user.email == undefined || user.username == undefined || user.password == undefined){
return false;
} else {
return true;
}
}
validateEmail(email){
const re = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
}

Answer 1

To hardcode new values is simple:
<tr *ngFor="let user of userDetails; index as i">
<td>{{user.username}}</td>
<td>{{user.username}}</td>
<td>{{user.email}}</td>
<td>{{user.password}}</td>
<td><button (click)="userDelete()">X</button></td>
<td><button (click)="userEdit(i)">Edit</button></td>
</tr>
userEdit(i) {
let editUser = this.userDetails[i];
editUser = { fullname: 'Tadas Blynda', etc. }
}
But what you need is probably this:
<div>
<form (ngSubmit)="onRegisterSubmit()" [formGroup] = "form" [hidden]="clicked">
<div class="form-group">
<label>Full Name</label>
<input type="text" [(ngModel)]="fullname" formControlName="fullname" class="form-control" >
</div>
<div class="form-group">
<label>Username</label>
<input type="text" [(ngModel)]="username" formControlName="username" class="form-control" >
</div>
<div class="form-group">
<label>Email</label>
<input type="text" [(ngModel)]="email" formControlName="email" class="form-control" >
</div>
<div class="form-group">
<label>Password</label>
<input type="password" [(ngModel)]="password" formControlName="password" class="form-control">
</div>
<input type="submit" class="btn btn-primary" value="Submit" [disabled]="!form.valid">
</form>
</div>
<div>
<form (ngSubmit)="onEditSubmit()" [formGroup] = "form" [hidden]="!clicked">
<div class="form-group">
<label>Full Name</label>
<input type="text" [(ngModel)]="fullname" formControlName="fullname" class="form-control"
placeholder="userDetails[editIndex]?.fullname" >
</div>
<div class="form-group">
<label>Username</label>
<input type="text" [(ngModel)]="username" formControlName="username" class="form-control" >
</div>
<div class="form-group">
<label>Email</label>
<input type="text" [(ngModel)]="email" formControlName="email" class="form-control" >
</div>
<div class="form-group">
<label>Password</label>
<input type="password" [(ngModel)]="password" formControlName="password" class="form-control">
</div>
<input type="submit" class="btn btn-primary" value="Submit" [disabled]="!form.valid">
</form>
</div>
<br>
<br>
<table border="2" class="table table-striped">
<tr>
<th>Full Name</th>
<th>Username</th>
<th>Email</th>
<th>Password</th>
<th>Delete</th>
<th>Edit</th>
</tr>
<div > </div>
<tr *ngFor="let user of userDetails; index as i">
<td>{{user.fullname}}</td>
<td>{{user.username}}</td>
<td>{{user.email}}</td>
<td>{{user.password}}</td>
<td><button (click)="userDelete()">X</button></td>
<td><button (click)="clickEdit(i)">Edit</button></td>
</tr>
</table>
And
export class AppComponent {
fullname : string;
username : string;
email : string;
password : string;
clicked = false;
userDetails:Array<object>;
form;
ngOnInit() {
this.userDetails=[];
this.form = new FormGroup({
fullname : new FormControl("", Validators.required),
username : new FormControl("", Validators.required),
email : new FormControl("", Validators.required),
password : new FormControl("", Validators.required)
});
}
onRegisterSubmit(){
let user = {
fullname : this.fullname ,
username : this.username,
email : this.email ,
password : this.password
}
this.userDetails.push(user);
}
editIndex = null;
clickEdit(i){
this.clicked = !this.clicked;
this.editIndex = i;
}
onEditSubmit() {
let editUser = {
fullname : this.fullname ,
username : this.username,
email : this.email ,
password : this.password
}
this.userDetails[this.editIndex] = editUser;
this.clicked = !this.clicked;
}
}
Let me know please, if any issues.