在四步註冊頁面中進行角度表單驗證

我在AngularJS中有一個4頁面註冊模塊。我只想在最後提交細節。只有在用戶在所有四個選項卡中填寫必填字段後，纔會啓用提交按鈕。此外，用戶可以將數據保存在註冊中，我們不需要任何必需的字段驗證在四步註冊頁面中進行角度表單驗證

我使用4個選項卡的不同控制器和模板，因爲它需要大量的數據作爲輸入。

我們如何確定用戶在四個不同的控制器中填寫了必填字段。

我使用

module.value（）

用於保存用戶數據的全局。通過這種方式我可以在不同的控制器之間共享用戶的詳細信但我不能驗證形式，因爲它是在四個不同的控制器/標籤

serviceApp.value('UserData',{});

來源

2013-10-01 Anoj Philip

當你寫：

<form name="formName" ng-controller="TheCtrl" ...>

然後會有一個在TheCtrl範圍命名formName變量。它的類型將是FormController。請注意表單對象具有$valid和$invalid屬性。

將必填字段下，這種形式的，如：

<form name="formName" ng-controller="TheCtrl" ...> 
    <input name="myInput" ng-required ... />

的表單對象將有$invalid=true如果myInput不填充項。

以上描述瞭解決方案的原理。你應該有4個表格和4個相應的控制器。如果如上所述定義每個控制器，則知道其相應形式的有效性。共享服務（或在您的model.value()連場）會跟蹤每個表格的有效性的狀態，例如：

app.controller("Form1Ctrl", function($scope, sharedService) { 
    $scope.$watch("form1Name.$valid", function(newval) { 
     sharedService.validity.form1 = newval; 
    }); 
    ... 
});

，最終提交按鈕時，纔會啓用時，所有形式都是有效的：

<button ng-disabled=" sharedService.validity.form1 == false 
        || sharedService.validity.form2 == false 
        || sharedService.validity.form3 == false 
        || sharedService.validity.form4 == false">

來源

2013-10-01 09:55:10

在四步註冊頁面中進行角度表單驗證

回答

相關問題