7.1: Profile Template

The MemberEditComponent template will be very similar to the MemberDetailComponent template - just with some changes to allow for editing.

Updating MemberEditComponent

Add Styles

Add the styles from the member-detail.component.scss to member-edit.component.scss

.container {
    margin-top: 1rem;
}

.btn {
    flex-grow: 1;
}

.card {
    width: 23rem;
}

.card-image-top {
    width: 100%;
    height: 100%;
}

.card-header {
    font-size: 2rem;
    font-weight: bold;
}

.card-body {
    padding: 0 25px;
}

Add Dynamic Button and Warning Message

Let's add some dynamic functionality. We'll disable the 'Save Changes' button if there are no changes to the form.

<button [disabled]="!editForm.dirty" class="btn btn-primary">Save Changes</button>

We'll also make the alert box hidden unless there have been changes made.

<div [hidden]="!editForm.dirty" class="alert alert-info text-center">
    <p>You have made changes. Any unsaved changes will be lost!</p>
</div>

Add updateUser() Method

Now, we need to stub out the updateUser() method we're using to submit our form.

We don't have the method on our backend, so for now - we can just console.log our form and verify that it's working correctly.

In member-edit.component.ts, add the following method and inject alertify into the constructor:

constructor(
    //  ...
    private _authService: AuthService) { }

//  ...

updateUser() {
  console.log(this.user);
  this._alertify.success('Profile updated successfully');
}

Our submit button is outside of our form, so we need to "hook up" the button and the form.

<button [disabled]="!editForm.dirty" form="editForm" class="btn btn-primary btn-block">Save Changes</button>

<form #editForm="ngForm" id="editForm">

Toggle the Information Panel

Our information box informing the user that changes have been made doesn't disappear after hitting submit at the moment.

Let's do this with ViewChild - the template is considered to be a child of the component. We can access the properties of the form with @ViewChild(). :

export class MemberEditComponent implements OnInit {

  user: User;
  @ViewChild('editForm') editForm: NgForm;


//  ...

  updateUser() {
    console.log(this.user);
    this._alertify.success('Profile updated successfully');
    this.editForm.reset(this.user);                             //  added
  }