从另一个不同的 AngularJS 组件访问表单（用于验证）
Posted
技术标签:
【中文标题】从另一个不同的 AngularJS 组件访问表单（用于验证）【英文标题】：Access a form (for validation) from another a different AngularJS component 【发布时间】：2018-01-11 15:50:43 【问题描述】：我有两个组件。一个有一个表单，另一个有导航，当单击导航按钮时，我需要访问表单以确保它在继续下一步之前进行验证。但是，当我尝试从另一个组件访问它时，表单总是未定义。是否可以从另一个组件访问表单，如果可以，我该如何完成？
Here's my sample code in plunker
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
// 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]
);
【问题讨论】：
表单只在<form></form>元素内部定义。您正试图在此元素之外访问 mainForm，因此它是未定义的。看看这个以获得一些想法：***.com/questions/36033940/…
好的，但是即使我将其他组件放在表单元素中，它仍然不起作用。 plnkr.co/edit/3tn2vAitj75hlUnNDjI5?p=preview
【参考方案1】：
一种方法是将两个组件嵌套在 ng-form element 中：
<ng-form name="top">
<form-component top-form="top"></form-component>
<nav-component top-form="top"></nav-component>
</ng-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]
);
DEMO on PLNKR
【讨论】：
以上是关于从另一个不同的 AngularJS 组件访问表单（用于验证）的主要内容，如果未能解决你的问题，请参考以下文章