NG-инвалидов не работает в угловой с Джанго

Question

Это моя угловатая форма. 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>

Answer 1

Необходимо внести много изменений.

1. ng-app и ng-controller div должен быть родительским для элемента формы. Элемент формы должен быть внутри div

2. Элемент формы должен содержать атрибут noValidate не div и ng-submit должен быть функцией.

3.Не нужно использовать ng-значение во входных привязках только с ng-моделью. Только для чтения текста используйте значение ng

4.В кнопке отправки формы используйте атрибут type="submit". Нет необходимости в значении атрибута в кнопке или используйте ввод type=submit

angular.module('UserBusinessDataModule',[]).controller('UserBusinessDataModuleController',function($scope){
 
  $scope.data = {}
  
  $scope.register = function(){
    console.log($scope.data);
  }

});

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