如何一起使用form和ng-form？答案

【问题标题】：How to use form and ng-form together?如何一起使用form和ng-form？
【发布时间】：2020-01-02 04:37:56
【问题描述】：

我想同时使用 form 和 ng-form。我有这样的标记：

<form 
name="createCampaignForm"
ng-submit="submitCreateCampaignForm(createCampaignForm.$valid)"
novalidate>
<myinput
  form="createCampaignForm"
  label="Campaign Name"
  name="name"
  type="text"
  ng-model="model.createCampaign.name"
  placeholder="Folow up, cart abandonment etc..."
  required="true"></myinput>
</form>

myinput 是一个组件：

app.component('myinput', {
  templateUrl: 'components/input.html',
  transclude: true,
  bindings: {
    disabled: '<',
    required: '<',
    ngModel: '=',
    form: '=',
    label: '@',
    placeholder: '@',
    type: '@',
    name: '@',
  },
  controller: function () {
  }
});

以及组件模板：

<div
  ng-form
  name="{{ $ctrl.form }}">
  <label>
    {{ $ctrl.label }}
    <small ng-if="$ctrl.required">(required)</small>
  </label>
  <input
    ng-model="$ctrl.ngModel"
    name="{{ $ctrl.name }}"
    type="{{ $ctrl.type }}"
    placeholder="{{ $ctrl.placeholder }}"
    required="{{ $ctrl.required }}"
    class="form-control form-control--block form-control--primary">
</div>

我想访问 myinput 的验证状态，例如 createCampaignForm.name.$invalid。

当我将 form 属性添加到 myinput 时，应用程序的行为就像它处于无限循环中。页面加载，但没有完成。并且浏览器控制台没有错误。

我怎样才能做到这一点？

例如，我有一个表单，其中包含 3 个 myinput。而且我应该能够访问所有 myinputs 的验证状态，例如 createCampaignForm.name.$valid createCampaignForm.status.$error 等...

【问题讨论】：

标签： angularjs angularjs-forms

【解决方案1】：

我不知道为什么，但是我更改了 ng-form 属性并解决了问题。

我改变了这个：

<div
  ng-form
  name="{{ $ctrl.form }}">

到这里：

<div
  ng-form="$ctrl.form">

【讨论】：