Making and Angular form invalid when inputs aren't required

Issue

I’m making a profile editor directly on the user’s profile page in where I want to show a live preview of the changes they are making.

I’m basically updating the view using models attached to inputs and textareas.

Here is a preview, showing name, profile image, header image and a little blurb:

The idea is to update those live (not submitting as of yet) so the user can preview what they are doing before they save the changes.

So the issue I am running into is that, I don’t want any of the fields to be required because I want them the have a choice to update their profile, so they can choose to update the profile image, header or text.

<div class="profile-editor" ng-if="name == '<?php echo $_SESSION['user']; ?>'">

<div class="current" style="background-image: url({{profile.background}});">
  <img class="photo" src="{{ updateProfileForm.photoUrl.$valid ? editPhoto : profile.photo }}" alt="">
  <h3>{{profile.username}}</h3>
  <p>{{ updateProfileForm.blurbEdit.$valid ? editBlurb : profile.blurb }}</p>
  <p ng-if="editingProfile" class="new-blurb">{{editBlurb}}</p>
  <p class="preview">preview</p>
</div>

<div class="save-editor">

  <p ng-repeat="element in updateProfileForm">
    {{element.$valid}}
  </p>

  <h1>Update Profile</h1>
  <p>{{information}}</p>

  <form role="form" name="updateProfileForm">
    <input name="backgroundUrl" class="edit-name-input" type="text" ng-model="editPhoto" placeholder="paste new photo url">

    <input name="photoUrl" class="edit-photo-input" type="text" ng-model="editBackground" placeholder="paste new background url">

    <textarea name="blurbEdit" class="edit-blurb" name="" id="" cols="30" rows="10" ng-model="editBlurb" placeholder="NEW BLURB"></textarea>

    <button ng-click="updateProfile(editPhoto,editBackground,editBlurb)" class="save-profile">save profile</button>
  </form>
</div>

However, in doing so, since they aren’t required, angular is saying the form is valid on load (which is technically correct) but what happens is my view gets changed and shows nothing because the fields show as valid:

How would I approach this?

Solution

The easiest solution could be to provide the user a form already filled with the current values.

Answered By – Pierre Prinetti

Answer Checked By – Senaida (AngularFixing Volunteer)