Same form for creating and editing data Angular4

Question

Here is a form with two way-binded input fields. The goal was to create the same form to edit and create data. That was accomplished, but I am pretty sure that there could b

Answer 1

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):

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

  {{user.username}}
  {{user.email}}
  Edit

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! :)