不需要输入时使 Angular 表单无效

Question

我正在直接在用户的个人资料页面上制作个人资料编辑器，我想在其中显示他们所做更改的实时预览。

我基本上是使用附加到输入和文本区域的模型更新视图。

这是预览，显示姓名、个人资料图片、header 图片和一些简介：

我们的想法是实时更新这些内容（目前尚未提交），以便用户可以在保存更改之前预览他们正在做的事情。

所以我运行遇到的问题是，我不想要求任何字段，因为我希望他们可以选择更新他们的个人资料，这样他们就可以选择更新个人资料图片，header 或文字。

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

然而，在这样做时，由于它们不是必需的，angular 表示该表单在加载时有效（这在技术上是正确的）但是发生的是我的视图被更改并且没有显示任何内容，因为字段显示为有效：

我该如何处理？

Answer 1

最简单的解决方案可能是为用户提供一个已填写当前值的表单。

Answer 2

对我来说，我会预先在数据中设置默认值，很可能在控制器中。我会定义对象或属性，检查是否有设定值，如果没有，我会分配默认值。然后，我将在您视图中的可编辑点和显示点之间共享对模型的引用。

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

这在这里可能看起来不是很有用，但它会让您打开观察来自其他来源的这些值的大门。如果模型在一个地方发生了变化，其他人就更容易跟随更新的信息。

不需要输入时使 Angular 表单无效

Making and Angular form invalid when inputs aren't required

javascript

forms

angularjs

angularjs-validation