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

Question

我想同时使用 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>

我想像 createCampaignForm.name.$invalid 一样访问 myinput 的验证状态。

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

我怎样才能做到这一点？

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

Answer 1

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

我改变了这个：

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

为此：

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

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

How to use form and ng-form together?

angularjs

angularjs-forms