不需要输入时制作和 Angular 表单无效答案

【问题标题】：Making and Angular form invalid when inputs aren't required不需要输入时制作和 Angular 表单无效
【发布时间】：2015-08-03 08:21:26
【问题描述】：

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

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

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

我们的想法是实时更新那些（尚未提交），以便用户可以在保存更改之前预览他们正在执行的操作。

所以我遇到的问题是，我不希望任何字段都是必需的，因为我希望他们可以选择更新他们的个人资料，因此他们可以选择更新个人资料图片、标题或文本。

<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 表示表单在加载时有效（这在技术上是正确的）但发生的情况是我的视图发生了变化并且没有显示任何内容，因为字段显示为有效：

我该如何处理？

【问题讨论】：

标签： javascript angularjs forms angularjs-validation

【解决方案1】：

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

【讨论】：

这实际上是一个我没有想到的好建议。我会尝试一下，但我觉得有些用户可能会对预先填写的输入感到困惑，并且可能不愿意更新它。我觉得使用上面的术语有助于给出明确的指示：“粘贴 url..”等..
这并没有提供问题的答案。要批评或要求作者澄清，请在其帖子下方发表评论。
@taifun 谢谢你的建议。我已经以答案的形式重写了我的建议。
这最终成为我不可避免的解决方案。我尝试了一些不同的方法，但没有任何结果。

【解决方案2】：

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

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

这在这里可能看起来并不完全有用，但它让您可以从其他来源查看这些值。如果模型在一个地方发生了变化，其他人就更容易跟随更新的信息。

【讨论】：