从另一个不同的AngularJS组件访问表单（用于验证）

Question

I have two components. 我有两个组成部分。 One has a form it in and the other has navigation where when clicked on the nav button, I need to get access to the form to make sure it's validating before moving on to the next step. 一个在其中有一个表单，另一个在其中有导航，当单击导航按钮时，我需要访问该表单以确保它有效，然后再继续下一步。 However, the form is always undefined when I try to access it from another component. 但是，当我尝试从另一个组件访问它时，该窗体始终是未定义的。 Is it possible to access the form from another component and if so, how can I accomplish this? 是否可以从另一个组件访问表单，如果可以，我该如何完成？

Here's my sample code in plunker 这是我在plunker中的示例代码

Index.html 的index.html

<!DOCTYPE html>
<html>

<head>
  <script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="app">

  <form-component></form-component>
  <nav-component></nav-component>
</body>

</html>

script.js 的script.js

// Code goes here

function checkForm(form) {
  if (form) {
      if (form.$valid) {
        alert("Form is valid!");
      } 
      else
      {
        alert("Form is invalid!");
      }
    }
    else {
      alert("FAILED! Form is undefined!");
    }
}

function formController() {
  var model = this;

  model.goToNextStep = function(form) {
    model.form = form;
    checkForm(form);
  };

}

function navController() {
  var model = this;

  model.goToNextStep = function(form) {
    model.form = form;
    checkForm(form);
  };

}

var app = angular.module("app", []);

app.component("formComponent", {
    template: `
      <div class="container">
        <form name="mainForm">
          <p>When you click the button that exists in the same component
             as the form, everything works fine.\
          </p>
          <input type="text" name="test123" value="THIS IS A TEST" />
          <button type="button" ng-click="model.goToNextStep(mainForm);">
            Submit Form
          </button>
        </form>
        <br /><strong>formComponent model:</strong> <pre>{{model | json }}</pre>
      </div>
    `,
    controllerAs: "model",
    controller: [formController]
});


app.component("navComponent", {
    template: `
      <div class="container">
        <p>When you click the button that does NOT exist in the same
           component as the form, it doesn't work.
        </p>
        <button type="button" ng-click="model.goToNextStep(mainForm);">Submit Form</button>
        <br /><br /><strong>navComponent model:</strong>
        <pre>{{model | json }}</pre>
      </div>
    `,
    controllerAs: "model",
    controller: [navController]
});

Answer 1

One approach is to nest the two components in an ng-form element : 一种方法是将两个组件嵌套在ng-form元素中：

  <ng-form name="top">
    <form-component top-form="top"></form-component>
    <nav-component top-form="top"></nav-component>
  </ng-form>

And use one-way < binding to connect the two to the top form: 并使用单向<绑定将两者连接到顶部表单：

app.component("formComponent", {
    bindings: {topForm: "<"},
    template: `
      <div class="container">
        <form name="mainForm">
          <p>When you click the button that exists in the same component as the form, everything works fine.</p>
          <input type="text" name="test123" value="THIS IS A TEST" />
          <button type="button" ng-click="model.goToNextStep(model.topForm);">Submit Form</button>
        </form>
        <br /><strong>formComponent model:</strong> <pre>{{model | json }}</pre>
      </div>
    `,
    controllerAs: "model",
    controller: [formController]
});

app.component("navComponent", {
    bindings: {topForm: '<'},
    template: `
      <div class="container">
        <p>When you click the button that does NOT exist in the same component as the form, it doesn't work.</p>
        <button type="button" ng-click="model.goToNextStep(model.topForm);">Submit Form</button>
        <br /><br /><strong>navComponent model:</strong> <pre>{{model | json }}</pre>
      </div>
    `,
    controllerAs: "model",
    controller: [navController]
});

The DEMO on PLNKR PLNKR上的演示

从另一个不同的AngularJS组件访问表单（用于验证）

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-08-04 03:11:13

从另一个不同的AngularJS组件访问表单（用于验证）

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-08-04 03:11:13

解决方案1
1 已采纳 2017-08-04 03:11:13