从Angular $ mdDialog中访问表单

Question

我使用$mdDialog推荐的方式使用Angular 1.5 Material Design controllerAs: "dialog".在模板中,我有一个表格:<form name="fooForm".在模板中,我可以毫无问题地访问表单,例如ng-disabled="fooForm.$invalid || fooForm.$submitted".

但是如何从$mdDialog控制器中访问该表单？根据我的阅读,我希望能够做到这一点:

    const doFoo = () => {
        if (this.fooForm.$dirty) {

这this是对话框控制器.

但我得到一个错误:TypeError: Cannot read property '$dirty' of undefined.果然,如果我在代码中放置断点,控制器就没有fooForm属性.

我也尝试过使用$scope,但是当我在代码中放置断点时$scope也没有fooForm属性.

这是我的对话框模板:

<md-dialog aria-label="FooBar">
  <md-toolbar>
    <div class="md-toolbar-tools">
      <h2>FooBar</h2>
      <span flex></span>
      <md-button class="md-icon-button" ng-click="dialog.cancel()">
        <md-icon>close</md-icon>
      </md-button>
    </div>
  </md-toolbar>
  <form name="fooForm" ng-submit="dialog.ok()" novalidate>
    <md-dialog-content>
      <div layout="column" layout-padding>
        <h2 class="md-headline">Foo</h2>
        <div layout="row" layout-xs="column">
          ...
      </div>
    </md-dialog-content>
    <md-dialog-actions>
      <md-button class="md-primary" type="submit" ng-disabled="fooForm.$invalid || fooForm.$submitted">
        OK
      </md-button>
      <md-button ng-click="dialog.cancel()">
        Cancel
      </md-button>
    </md-dialog-actions>
  </form>
</md-dialog>

如何$mdDialog从对话框控制器访问表单？

Answer 1

您需要将表单分配给控制器的范围。通过将表单名称从 更改为fooForm来完成此操作dialog.fooForm。

<form name="dialog.fooForm" ng-submit="dialog.ok()" novalidate>