Making and Angular form invalid when inputs aren't required

Question

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:

Here is the image 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:

Image showing empty values

How would I approach this?

Pierre Prinetti · Accepted Answer · 2015-05-21 16:32:01Z

2

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

edited May 21, 2015 at 16:32

answered May 21, 2015 at 15:08

Pierre Prinetti

9,7226 gold badges36 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Adrian Rodriguez Over a year ago

That's actually a great suggestion I hadn't thought of. I will try it out, but I feel like some users might get confused with pre-filled inputs and may not be inclined to update it. I feel using the terminology I have above helps give clear instruction: "paste url.." etc..

Taifun Over a year ago

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post.

Pierre Prinetti Over a year ago

@taifun Thank you for your suggestion. I've rewritten my advice in the form of an answer.

Adrian Rodriguez Over a year ago

This ended up being the inevitable solution for me. I tried a few different things with no results.

Davidnbrooks · Accepted Answer · 2015-05-21 15:55:03Z

1

For me, I would set the defaults in the data up front, likely in the controller. I'd define the object or property, check if there was a set value, and if not I'd assign the default. Then, I'd just share the references to the model across the editable and display points on your view.

ng-model="profileBackground"`, for example.`

This may not seem entirely useful here, but it opens you up to watching those values from other sources. If the model changes in one place, it's easier for the rest to follow along with the updated info.

answered May 21, 2015 at 15:55

Davidnbrooks

536 bronze badges

Collectives™ on Stack Overflow

Making and Angular form invalid when inputs aren't required

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related