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：使用嵌套表单和diSable按钮parentForm。$ invalid其中parentForm是外部表单的名称

选项。 2：编写服务以在2个控制器之间进行通信。

我会在两种情况下这样做， A）如果您计划将多个表单的更多内容添加到同一视图中，并且您的禁用逻辑不像检查父表单的有效性那样直接， B）您的禁用逻辑很简单，由于某种原因您不能或您不想嵌套这两个表单 C）您的表单有两个完全不同的视图，这些视图包含在父视图中，您无法嵌套它们。

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

享受！

在Angular中跨控制器进行表单验证

2 个答案: