I am trying to do CRUD app. my component code is
import {Component} from 'angular2/core';
import {FormBuilder, Validators, ControlGroup} from 'angular2/common';
function emailValidator(control) {
var EMAIL_REGEXP = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
if (!EMAIL_REGEXP.test(control.value)) {
return {invalidEmail: true};
}
}
function mobileValidator(control) {
var MOBIL_REGEXP = /^[0-9]{10}$/;
if(!MOBIL_REGEXP.test(control.value)){
return {invalidMobile: true};
}
}
@ComponeteEmployeeForm;
createEmployeeJson;
employees;
employeeCreate;
constructor(createForm: FormBuilder){
this.createEmployeeForm = createForm.group({
employeeName: ["", Validators.required],
employeeEmail: ["", Validators.compose([emailValidator])],
employeeMobile: ["", Validators.compose([mobileValidator])]
});
this.employees = [{ "employeeName": "asd", "employeeEmail": "[email protected]", "employeeMobile": "2342342323", "isEditable": false }];
this.employeeCreate = {};
}
createEmployee(){
console.log(this.employeeCreate)
this.createEmployeeJson = this.employeeCreate;
this.employeeCreate.isEditable = false;
this.employees.push(this.employeeCreate);
console.log(this.employeeCreate)
this.createEmployeeForm.controls["employeeName"].updateValue("")
this.createEmployeeForm.controls["employeeEmail"].updateValue("")
this.createEmployeeForm.controls["employeeMobile"].updateValue("")
}
makeEditable(data,index){
console.log(data)
data.isEditable = true;
}
updateEditedData(data,index){
data.isEditable = false;
}
}
nt({
selector: 'crud',
templateUrl: 'app/components/CRUD-only-FE/CRUD-only-FE.html'
})
export class CRUDOnlyFE{
createEmployeeForm;
createEmployeeJson;
employees;
employeeCreate;
constructor(createForm: FormBuilder){
this.createEmployeeForm = createForm.group({
employeeName: ["", Validators.required],
employeeEmail: ["", Validators.compose([emailValidator])],
employeeMobile: ["", Validators.compose([mobileValidator])]
});
this.employees = [{ "employeeName": "asd", "employeeEmail": "[email protected]", "employeeMobile": "2342342323", "isEditable": false }];
this.employeeCreate = {};
}
createEmployee(){
console.log(this.employeeCreate)
this.createEmployeeJson = this.employeeCreate;
this.employeeCreate.isEditable = false;
this.employees.push(this.employeeCreate);
console.log(this.employeeCreate)
this.createEmployeeForm.controls["employeeName"].updateValue("")
this.createEmployeeForm.controls["employeeEmail"].updateValue("")
this.createEmployeeForm.controls["employeeMobile"].updateValue("")
}
makeEditable(data,index){
console.log(data)
data.isEditable = true;
}
updateEditedData(data,index){
data.isEditable = false;
}
}
<h1>Create Employee</h1>
<form (ngSubmit)="createEmployee()" [ngFormModel]="createEmployeeForm" #create='ngForm' novalidate>
<input type="text" placeholder="Enter Employee Name" ngControl="employeeName" [(ngModel)]="employeeCreate.employeeName">
<span style="color:red">
<span *ngIf="create.form.controls.employeeName.touched && !create.form.controls.employeeName.valid">
Employee Name Required
</span>
</span>
<input type="text" placeholder="Enter Employee email" ngControl="employeeEmail" [(ngModel)]="employeeCreate.employeeEmail">
<span style="color:red">
<span *ngIf="create.form.controls.employeeEmail.touched && !create.form.controls.employeeEmail.valid">
Employee Email Required
</span>
</span>
<input type="text" placeholder="Enter Employee Mobile" ngControl="employeeMobile" [(ngModel)]="employeeCreate.employeeMobile">
<span style="color:red">
<span *ngIf="create.form.controls.employeeMobile.touched && !create.form.controls.employeeMobile.valid">
Employee Mobile Required
</span>
</span>
<button type="submit">Create</button>
</form>
<div *ngIf="employees">
<br>
<table class="table table-bordered">
<tr>
<th>Emp ID</th>
<th>Employee Name</th>
<th>Email</th>
<th>Mobile</th>
<th>Action</th>
</tr>
<tr *ngFor="#employee of employees #i=index">
<td>{{i+1}}</td>
<td [contentEditable]="employee.isEditable">{{employee.employeeName}}</td>
<td>{{employee.employeeEmail}}</td>
<td>{{employee.employeeMobile}}</td>
<td><button class="btn btn-xs btn-primary" (click)="makeEditable(employee,i)" *ngIf="!employee.isEditable">Edit</button><button class="btn btn-xs btn-primary" (click)="updateEditedData(employee,i)" *ngIf="employee.isEditable">Update</button></td>
</tr>
</table>
<pre>{{employees | json}}</pre>
</div>
I have function makeEditable(employee,index) which contains single row value and index value. If i did data.isEditable = true; or this.employees[index].isEditable = true, then output is
why all records are changing. as per concept only one record need to be change right. Please give me some solution
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
