Question

我有angular site的以下代码：

<form name='form'>
    <div contentEditable="true" ng-model="content" title="Click to edit">Some</div>

    <pre>{{form | json}}</pre>
</form>

我在所需输入下面输出以下内容：

{
  "$error": {},
  "$name": "form",
  "$dirty": true,
  "$pristine": false,
  "$valid": true,
  "$invalid": false,
  "$submitted": false
}

遗憾的是我无法检查输入的有效性/ ditryness / etc，因为表单上没有输入属性。

为什么表单对象中不存在角度？

Relevant plunker

Angular版本： 1.4.4

Answer 1

事实证明，当输入的name属性时，属性会添加到表单对象 （仅与HTML中的合理更改相关）在场。

因此这段代码（为了测试，我添加了name='firstName'和一些基本验证：ng-required="true"）：

  <form name='form'>
    <div contentEditable="true"
         ng-model="content"
         title="Click to edit"
         ng-required="true"
         name='firstName'> Some </div>

    <pre>{{form | json}}</pre>
  </form>

将输出具有与input：

相关的firstName属性的表单对象

{
  "$error": {},
  "$name": "form",
  "$dirty": true,
  "$pristine": false,
  "$valid": true,
  "$invalid": false,
  "$submitted": false,
  "firstName": {
    "$viewValue": " Some ",
    "$modelValue": " Some ",
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [],
    "$formatters": [],
    "$viewChangeListeners": [],
    "$untouched": false,
    "$touched": true,
    "$pristine": false,
    "$dirty": true,
    "$valid": true,
    "$invalid": false,
    "$error": {},
    "$name": "firstName",
    "$options": null
  }
}

Relevant plunker

表单字段不存在于Angular中的表单对象上

1 个答案: