在angularjs中進行客戶端驗證

我在學習AngularJS，並且在驗證客戶端的表單輸入時遇到了問題。我在Yii2有一個REST API，並在服務器端驗證註冊表單。我想添加一些客戶端驗證也。下面是一個輸入的代碼（其他幾乎是相同的）：在angularjs中進行客戶端驗證

<form ng-submit="register()" name="registerForm" id="register-form" method="post" role="form" novalidate> 
    <div ng-class="{ 'has-success': (!error['login'] && submitted) || (registerForm.login.$touched && registerForm.login.$valid), 
    'has-error': (error['login'] && submitted) || (registerForm.login.$touched && registerForm.login.$invalid) }" 
    class="form-group"> 
    <label class="control-label" for="login">Username</label> 
    <input ng-model="registrationForm.login" type="text" id="login" class="form-control" name="login" required> 
    <p class="help-block help-block-error">{{ error['login'] }}</p> 
    <p class="help-block" ng-show="registerForm.login.$invalid && registerForm.login.$touched">This field is required.</p> 
</div> 
... (other inputs) 
</form>

一些解釋：已-成功應設置如果輸入有效的 - 第一支架是用於服務器端驗證，二是針對客戶端側。 - 第一個求助塊顯示服務器端驗證錯誤 - 第二求助塊顯示客戶端驗證錯誤

問題： 錯誤在客戶端驗證不顯示。此外，整個div類都沒有設置。

我在做什麼錯？編號：添加了包裝輸入的表格。

來源

2015-12-21 Kamil Cierczek

首先，我相信你缺少在這個片段中的表單元素。你有一個表單，其中包含文本字段的'registerForm'的名稱？如果你這樣做，最好將它添加到片段中。 – asulaiman

您錯過了封裝輸入字段的表單。角度驗證是在表單級完成的，您不能驗證獨立輸入字段（除非您使用ng-form指令 - https://docs.angularjs.org/api/ng/directive/ngForm）。當您使用具有與驗證相關的正確名稱的表單時，會出現驗證錯誤。

Validated in this plunk

<div ng-class="{ 'has-success': (!error['login'] && submitted) || (registerForm.login.$touched && registerForm.login.$valid), 
'has-error': registerForm.login.$touched && registerForm.login.$invalid }" class="form-group"> 
<form name="registerForm"> 
    <label class="control-label" for="login">Username</label> 
    <input ng-model="registrationForm.login" type="text" id="login" class="form-control" name="login" required> 
</form> 
<p class="help-block" ng-show="registerForm.login.$invalid && registerForm.login.$touched">This field is required.</p>

來源

2015-12-21 16:48:05 asulaiman

嗨，我不好。這只是表單的一部分。我已經在一個名爲「registerForm with a action」regiter（）的窗體中實現了所有輸入，並在控制器的範圍內實現。 –

在這種情況下，我無法再現您的問題。如果打開我張貼的plunk，您會注意到css類和ng-show在驗證失敗的情況下按預期工作。我已經更新了這個plunk以包含一個「有錯誤」的類風格來證明這一點。 – asulaiman

在angularjs中進行客戶端驗證

回答

相關問題