ng-disabled与django无法协同工作

时间:2018-04-24 23:27:38

标签: javascript angularjs

这是我的角色形式。 ng-disabled无法正常工作,我试过$ pristine,$ dirty和$ touch。此外ng-submit无法正常工作。我尝试将按钮放在窗体外,但仍无效。您的建议将不胜感激。请提供一些建议,如果您的输入有效,我会回复您。

谢谢。

{% block content %}

<div class="container">

<form name="businessform" method="post" style="margin-top:5%;" ng-submit="Register">

  {% csrf_token %}
  {% verbatim %}

  <div ng-app="UserBusinessDataModule" ng-controller="UserBusinessDataModuleController" novalidate>

    <div>
      <h6>Business Name</h6>
    </div>
    <div>
      <input type="text" ng-value="data['name']" class="name" ng-model="name" ng-required="true"/>
    </div>

    <div>
      <h6>Address 1</h6>
    </div>
    <div>
      <input type="text" ng-value="data['address1']" class="address1"  ng-model="address1" ng-required="true"/>
    </div>
    <div>
      <h6>Address 2</h6>
    </div>
    <div>
      <input type="text" ng-value="data['address2']" class="address2"  ng-model="address2" ng-required="true"/>
    </div>
    <div>
      <h6>Zipcode</h6>
    </div>
    <div>
      <input type="text" ng-value="data['zipcode']" class="zipcode" ng-model="zipcode" ng-required="true"/>
    </div>
    <div>
      <h6>City</h6>
    </div>
    <div>
      <input type="text" ng-value="data['city']" class="city" ng-model="city" ng-required="true"/>
    </div>
    <div>
      <h6>State</h6>
    </div>
    <div>
      <input type="text" ng-value="data['state']" class="state" ng-model="state" ng-required="true"/>
    </div>
    <div>
      <h6>industry</h6>
    </div>
    <div>
      <input type="text" ng-value="data['industry']" class="industry" ng-model="industry" ng-required="true"/>
    </div>
    <div>
      <h6>Primary Business</h6>
    </div>
    <div>
      <input type="text" ng-value="data['primary_business']" class="primary_business" ng-model="primarybusiness" ng-required="true"/>
    </div>
    <div>
      <h6>Secondary Business</h6>
    </div>
    <div>
      <input type="text" ng-value="data['secondary_business']" class="secondary_business" ng-model="secondarybusiness" ng-required="true"/>
    </div>

    <br>
    <button class="btn btn-success" value="submit" ng-disabled="businessform.$invalid"></button>
</div>

 {% endverbatim %}

</form>

1 个答案:

答案 0 :(得分:0)

需要做很多改变。

1. ng-app ng-controller div应该是表单元素的父级.Form元素应该在div中

2.Form元素应包含 noValidate 属性而不是div, ng-submit sould 是函数。

3.不需要在输入绑定中仅使用ng-model使用ng-value。对于只读文本,请使用ng-value

4.在表单提交按钮中使用属性type=submit。按钮中不需要值属性或使用输入angular.module('UserBusinessDataModule',[]).controller('UserBusinessDataModuleController',function($scope){ $scope.data = {} $scope.register = function(){ console.log($scope.data); } });

&#13;
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="UserBusinessDataModule" ng-controller="UserBusinessDataModuleController">
<form name="businessform" style="margin-top:5%;" ng-submit="register()"  novalidate>
  <div>
    <div>
      <h6>Business Name</h6>
    </div>
    <div>
      <input type="text" class="name" ng-model="data.name" ng-required="true"/>
    </div>

    <div>
      <h6>Address 1</h6>
    </div>
    <div>
      <input type="text" class="address1"  ng-model="data.address1" ng-required="true"/>
    </div>
    <div>
      <h6>Address 2</h6>
    </div>
    <div>
      <input type="text" class="address2"  ng-model="data.address2" ng-required="true"/>
    </div>
    <div>
      <h6>Zipcode</h6>
    </div>
    <div>
      <input type="text" class="zipcode" ng-model="data.zipcode" ng-required="true"/>
    </div>
    <div>
      <h6>City</h6>
    </div>
    <div>
      <input type="text" class="city" ng-model="data.city" ng-required="true"/>
    </div>
    <div>
      <h6>State</h6>
    </div>
    <div>
      <input type="text" class="state" ng-model="data.state" ng-required="true"/>
    </div>
    <div>
      <h6>industry</h6>
    </div>
    <div>
      <input type="text" class="industry" ng-model="data.industry" ng-required="true"/>
    </div>
    <div>
      <h6>Primary Business</h6>
    </div>
    <div>
      <input type="text" class="primary_business" ng-model="data.primarybusiness" ng-required="true"/>
    </div>
    <div>
      <h6>Secondary Business</h6>
    </div>
    <div>
      <input type="text" class="secondary_business" ng-model="data.secondarybusiness" ng-required="true"/>
    </div>

    <br>
    <input type="submit" value="submit"  ng-disabled="businessform.$invalid" class="btn btn-success" />
  
</div>
</form>
</div>
&#13;
10:56:26,082 [pool-13-thread-1] org.apache.kafka.clients.consumer.internals.Fetcher: Unknown error fetching data for topic-partition testKafka-0
WARN  2018-04-13 10:56:26,125 [pool-13-thread-1] org.apache.kafka.clients.consumer.internals.Fetcher: Unknown error fetching data for topic-partition testKafka-0
&#13;
&#13;
&#13;