在Angular中跨控制器通信表单验证

Question

我正在使用UI路由器，并在同一页面上有两个表单。我想提交按钮被禁用，如果任何形式是无效的。我不确定如何将这个信息从控制器A传达给控制器B。换句话说，我如何与控制器B传达形式1中的{{paymentForm.$invalid}}不再为真?

形式1

<form name="paymentForm" novalidate >
<div class="row">
  <div class="col-sm-4 form-group" >
        <label class="control-label" for="first-name">First Name</label>
        <input autofocus type="text" id="first-name" name="firstName" ng-model="contactForm.contact.firstName"
           placeholder="First Name" class="form-control" required />
    </div>
    <div class="col-sm-2 form-group">
        <label for="middle-name">Initial</label>
        <input type="text" id="middle-name" name="middleName" ng-model="contactForm.contact.middleName"
           placeholder="Initial" class="form-control" >
    </div>

形式2

<form novalidate name="myForm" >
  <p class="text-muted" ng-bind="myForm.number"></p>
<div class="form-group" >
<label class="control-label" for="cardnumber">Card number</label>
<div class="input-group">
<input id="cardnumber" type="text" placeholder="Card Number" name="cardnumber" class="form-control input-block-level" ng-model="number" payments-validate="card" payments-format="card" payments-type-model="type" ng-class="myForm.expiry.$card.type" required />

<button type="submit" ng-disabled="myForm.$invalid || paymentForm.$invalid" class="btn btn-primary btn-large" type="button">Submit</button>

Answer 1

您可以使用ng-form将这两个表单嵌套到父表单中。这样，如果两个子表单中的任何字段无效，父表单也将无效。

Answer 2

选项。1:使用嵌套表单并禁用按钮parentForm。$invalid where parentForm是外部表单的名称

选项。2:写两个控制器之间通信的服务

我会在两种情况下这样做，A)如果你计划为多个表单添加更多到同一视图，你的禁用逻辑不像检查父表单的有效性那样直接，B)你的禁用逻辑很简单，出于某种原因，你不能或你不想嵌套这2种形式C)你的表单是在2个完全不同的视图，包括在一个父视图，你不能嵌套它们。

如果我们计划编写一个公共服务，使用标志变量来指示每个表单的有效性。在你的两个控制器中注入这个服务!

享受吧!