1
私はフォームにユーザー情報を入力して、それを配列に保存してからテーブルにレンダリングします。別のユーザーデータでさらに行を追加できます。そして、私はテーブルから特定の行を削除することができます。私も編集ボタンを持っていますが、私はそれをどうするか分かりません。CRUD角度アプリ
Register.htmlファイル
<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はファイル
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
}
}
検証サービスファイルは、新しい値をハードコーディングする
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 = /^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[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);
}
}
あなたの質問は何ですか？ – jhhoff02
フォームを送信して保存した詳細を編集するにはどうすればいいですか –