Same form for creating and editing data Angular4

I would make quite a few changes to your form. ngModel is totally redundant here as you are using a reactive form. Utilize that instead and remove all ngModel's. The object you are getting from the form, is matching your user, so what you can do, is just push that value as is to the array.

So your template should look something like this (shortened, as the 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 the build of the form I have in this case used a hidden field, that is also excluded from the form object as it is disabled. This is a helper for us, so we can differentiate if this is a new user, or if we are editing a user. The value holds the index of the user from your array. So if that value exists, we know to update the object in the array, if the value does not exist, let's push the user to the array.

This could be solved by numerous ways, but above is one option.

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

So according to the above, we can modify the onRegisterSubmit to look like the following:

onRegisterSubmit(form) {
  // since field is disabled, we need to 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 to empty
}

When we want to edit a user, we pass the index and the user in template

<tr *ngFor="let user of userDetails; let i = index">
  <td>{{user.username}}</td>
  <td>{{user.email}}</td>
  <td><button (click)="userEdit(user, i)">Edit</button></td>
</tr>

And then we use setValue (or patchValue) to enter the fields with the existing values:

userEdit(user, i) {
  this.form.setValue({
    index: i,
    username: user.username,
    email: user.email
  })
}

That should do it! So now we can see how much we could simplify your code and get rid of some unnecessary things! :)

Dummy Forms

Creating Form that are reusable.

Folder Structure

Usage

User Form Component

<form (ngSubmit)="submit(form)" [formGroup] = "form">
  <input type="text" formControlName="username" >
  <button type="submit"[disabled]="!form.valid"> Submit</button>
  <button type="button" (click)="cancel()"></button>
</form>

@Input() formData;
@Output() onSubmit = new EventEmitter();
@Output() onCancel = new EventEmitter();

ngOnInit(){
    this.form = this.fb.group({
      username : ['', Validators.required]
    });

    // Edit Mode will have formData.
    if(this.formData){
        this.form.patchValue(this.formData)
    }
}

submit(){
   if(this.form.valid){
       this.onSubmit.emit(this.form.value)
   }
}

cancel(){
  this.onCancel.emit();
}

Add User Component

<user-form                  
    (onSubmit)="addUser($event)"  
    (onCancel)="cancel()">
</user-form>

addUser(data){
   // Call Http Service to save data
}

cancel(){
   // navigate to different route or something else
}

Edit User Component

<user-form 
    [formData]="formData"                 
    (onSubmit)="updateUser($event)"  
    (onCancel)="cancel()">
</user-form>

ngOnInit(){
   this.formData = //fetch data from server 
}

updateUser(data){
   // Call Http Service to save data
}

cancel(){
   // navigate to different route or something else
}

Pros

1. Single Component for single use
2. Can reuse the dummy forms anywhere throughout the application.
3. Easy to maintain and extend the form

Cons

1. For each page you will have 3 components ( add, edit, form).