Clever Geek Handbook

Creation and Angular form is invalid if no inputs are required

I am creating a profile editor directly on the user profile page where I want to show a preview of the changes they create.

I am basically updating the view using models attached to inputs and text boxes.

Here's a preview showing the name, profile picture, header image, and a small ad campaign:

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

The idea is to update the data in real time (without showing it yet) so that the user can preview what they are doing before saving the changes.

So the problem I'm running into is that I don't want any of the fields to be needed because I want them to have a choice to update their profile so they can choose to update their profile picture , headline 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 with this, since they are not required, angular says the form is valid on load (which is technically correct), but what happens is my view changes and shows nothing because the fields are rendered as valid

Image showing empty values

How do I approach this?

+3


source to share


2 answers


The simplest solution is to present the user with a form already filled with current values.



+2


source


For me, I have set the default values ​​in the data in front, probably in the controller. I would define an object or property, check if there was a given value, and if not, I would assign a default value. Then I'll just pass the model references to the editable and displayable points in your view.

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


This may not sound very useful here, but it opens up the possibility for you to observe these values ​​from other sources. If the model changes in one place, it is easiest for others to keep track of the updated information.

+1


source






More articles:


All Articles