angular - Same form for creating and editing data Angular4 -

here form 2 way-binded input fields. goal create same form edit , create data. accomplished, pretty sure there better way (like using abstractcontrol features). miss 1 fix here - if clickedit() being clicked need update form values object user wants edit. , explanations abstractcontrol , ngmodel..

<div> <form (ngsubmit)="clicked ? oneditsubmit($event) : onregistersubmit($event)" [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>   <button type="submit" class="btn btn-primary" [disabled]="!form.valid"> submit </button> </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 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

import { component } '@angular/core'; import { initializeapp, database } 'firebase'; import { formcontrol, formgroup, validators } '@angular/forms';   @component({   selector: 'app-root',   templateurl: './app.component.html',   styleurls: ['./app.component.css'], }) 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(e){     let user = {       fullname : this.fullname ,       username : this.username,       email : this.email ,       password : this.password     }      this.userdetails.push(user);      this.clearinputfields(e);    }     editindex = null;    clickedit(i){     this.clicked = !this.clicked;     this.editindex = i;   }    oneditsubmit(e) {     let edituser = {       fullname : this.fullname ,       username : this.username,       email : this.email ,       password : this.password     }     this.userdetails[this.editindex] = edituser;     this.clearinputfields(e);       this.clicked = !this.clicked;     }    clearinputfields(e){    let = e.target.queryselectorall('input');     object.keys(all).foreach(key => {         console.log(all[key].value = '');        });       } } 

i make quite few changes form. ngmodel totally redundant here using reactive form. utilize instead , remove ngmodel's. object getting form, matching user, can do, push value array.

so template should (shortened, rest of code):

<form (ngsubmit)="onregistersubmit(form)" [formgroup] = "form">   <input type="text" formcontrolname="username" class="form-control" >   <input type="submit" class="btn btn-primary" value="submit" [disabled]="!form.valid"> </form> 

in build of form have in case used hidden field, excluded form object disabled. helper us, can differentiate if new user, or if editing user. value holds index of user array. if value exists, know update object in array, if value not exist, let's push user array.

this solved numerous ways, above 1 option.

this.form = this.fb.group({   index: [{value: null, disabled:true}]   username : ['', validators.required],   email : ['', validators.required], }); 

so according above, can modify onregistersubmit following:

onregistersubmit(form) {   // since field disabled, need use 'getrawvalue'   let index = form.getrawvalue().index   if(index != null) {     this.userdetails[index] = form.value   } else {     this.userdetails.push(form.value)         }   this.form.reset() // reset form empty } 

when want edit user, pass index , user in template

<tr *ngfor="let user of userdetails; let = index">   <td>{{user.username}}</td>   <td>{{user.email}}</td>   <td><button (click)="useredit(user, i)">edit</button></td> </tr> 

and use setvalue (or patchvalue) enter fields existing values:

useredit(user, i) {   this.form.setvalue({     index: i,     username: user.username,     email: user.email   }) } 

that should it! can see how simplify code , rid of unnecessary things! :)