【问题标题】:ngOptions and select, required attribute satisfied when target property is undefinedngOptions 和 select,当目标属性未定义时满足必需的属性
【发布时间】:2013-09-25 01:33:03
【问题描述】:

我真的不知道如何解释这个,但我会尽力而为,我也有一个 plunker,所以希望能有所帮助。

http://plnkr.co/edit/mbKvRoXl92f4zPJLxRGJ?p=preview

TLDR 版本:

  1. 从下拉菜单中选择“abcdefg@yahoo.com”,以满足其所需属性。
  2. 从“家庭电子邮件”输入字段中删除“abcdefg@yahoo.com”。
  3. 请注意,下拉菜单不再选择电子邮件,但仍满足其 required 属性。

长篇版

我有一些输入字段,它们与数组 ($scope.contact.emails) 中的对象相关联。然后将包含这些对象的数组绑定到一个选择元素。 select 元素有一个 ng-model 指令,包含当前选择的数组中的对象。

当页面加载时,没有选择任何内容,因此绑定到 select 的 ng-model (default_email) 是未定义的,并且“必需”文本显示在 select 元素旁边。

现在需要注意的是,“电子邮件”字段是必需的,但“家庭电子邮件”字段不是必需的。如果我在下拉列表中选择我的“首选电子邮件”是“家庭电子邮件”字段 (abcdefg@yahoo.com) 中的电子邮件,则满足选择要求,并且我的联系人对象中的 default_email 属性分配了由表示的对象该字段(default_email":{"id":"home_email","name":"Home Email","address":"abcdefg@yahoo.com"})

问题来了,如果我现在将“Home Email”输入框的内容删除为空,则选择变为“Please Select Preferred Email”,但该对象仍被分配到了default_email属性中联系人对象,只是现在它缺少属性“地址”,因为它不再满足输入中指定的 type="email" 的要求。真正的问题是我需要显示“必需”标签,但不是。这是由于定义了 default_email,只有分配给它的对象缺少我实际需要的属性,即“地址”。

非常感谢任何帮助,如果更多细节或澄清会有所帮助,请告诉我,对于 Angular 来说真的很陌生,所以请耐心等待。

【问题讨论】:

  • 尽量缩短你的帖子,大多数人不会阅读所有问题

标签: angularjs


【解决方案1】:

您已经形成了形式,因此外部形式 contactForm 看不到内部形式:ng-form="innerForm"

不知道设计好不好。

但有些解决方法:

添加到控制器:

 $scope.isRequired = function(){
  return $scope.isRequiredBool;
 };

 $scope.isEmpty = function(value){
   if(value == ''){
     $scope.isRequiredBool = true;
  } 
};

之后,将|| isRequired() 添加到ng-show

<span ng-show="contactForm.default_email.$error.required || isRequired()" class="help-block">Required</span>

之后,将ng-change="isEmpty(email.address)" 添加到innerForm 输入。

它应该可以工作:

Your modified Plunker

希望对你有帮助,

【讨论】:

  • 首先感谢您的帮助。不过,我应该更清楚一点,我不仅需要仍然出现所需的跨度,而且还需要表单仍然无效并且底部的提交按钮被禁用(表单需要无效/有效)。其次,您发布的解决方案并不完全有效,因为虽然必需标签仍然存在,但在从框中选择另一封电子邮件后它并没有消失。最后,嵌套表单是由于赋予其中的元素的动态名称。我发现 angular 不喜欢用于表单验证的动态名称。也更新了 plunker。
  • 好吧,我没想到要解决所有问题,在运行 unitest 之后,我想向您展示一个概念,即您别无选择,只能使用 $scope 作为桥梁。就我而言,我使用了isRequired 方法。此外,我从未见过一种形式变成另一种形式,存在封装问题。如果您要定义 1 个表单,当然,它会很容易修复。祝你好运
  • 顺便说一句,将 ng-change 添加到组合框以删除标志
猜你喜欢
  • 1970-01-01
  • 2014-07-03
  • 2014-04-22
  • 2014-08-03
  • 1970-01-01
  • 1970-01-01
  • 2019-11-19
  • 1970-01-01
  • 2017-02-12
相关资源
最近更新 更多