Question

我正在尝试获取表单字段的输入值，但是当我使用下面的代码时，该值显示为undefined。

知道我在这里做错了吗？

.controller('ContactFormCtrl',
   function (Contacts) {
     var contactForm = this;
     contactForm.contacts = Contacts;
     contactForm.contact = {};
     var mail=contactForm.contact.email;

     contactForm.onchange = function () {console.log(mail);};
 });


<div class="col-sm-6 form-group">
   <label class="control-label" for="email">Email</label>
   <input type="email" id="email" name="email" ng-model="contactForm.contact.email" class="form-control" ng-change="contactForm.onchange()" ng-model-options="{ updateOn: 'blur' }" />
</div>

Answer 1

将控制器更新为：

 .controller('ContactFormCtrl',
  function (Contacts) {
    var contactForm = this;
    contactForm.contacts = Contacts;
    contactForm.contact = {};
    contactForm.contact.email="";
    var mail=contactForm.contact.email;

    contactForm.onchange = function () {console.log(mail);};
 });

目前，没有电子邮件属性＆＃34; contactForm.contact＆＃34;宾语。因此，您需要初始化电子邮件属性，它不会给您未定义的错误。

Answer 2

当您使用controllerAs语法时，您应该使用别名contactForm

<div ng-controller="ContactFormCtrl as contactForm">
 <div class="col-sm-6 form-group">
   <label class="control-label" for="email">Email</label>
   <input type="email" id="email" name="email" ng-model="contactForm.contact.email" class="form-control" ng-change="contactForm.onchange()" ng-model-options="{ updateOn: 'blur' }" />
 </div>
</div>

它未定义的原因是你在contact之后重新初始化了控制器contactForm.contacts = Contacts;对象，它覆盖了email的值。

<强>更新

正如在聊天中所讨论的那样，您希望在电子邮件验证时显示电子邮件以及您想要调用onchange函数，因此您必须使用指令ng-change与{{1}的组合那么你应该摆脱不适合你要求的ng-blur。

<强>标记

ng-model-options

输入字段在Angular中显示为未定义

2 个答案: