Köşeli malzeme kullanarak bir formu doğrulayın

Question

Köşeli malzemeyi kullanarak bir formu nasıl doğrulayabilirim, İşlevlerime ihtiyacım var: 1) Gerekli alanları boşsa, hata iletilerini göster seçeneğini tıklatın. 2) Form alanları geçerli değilse, posta isteği göndermeyin (göndermekten kaçının). Bir sonraki kod göndermeyi engeller, ancak yalnızca her bir giriş alanından imleç çıktığında, tıklatıldığında hata mesajlarını göstermez.

<form name="userForm"> 
<md-input-container> 
    <input name="email" placeholder="Email" data-ng-model="vm.registerUserData.email" required /> 
    <div ng-messages="userForm.email.$error" ng-if='userForm.myControl.$dirty'> 
     <div ng-message="required">This is required!</div> 
    </div> 
</md-input-container> 

<md-input-container> 
    <input name="Password" placeholder="Password" data-ng-model="vm.registerUserData.password" required /> 
    <div ng-messages="userForm.Password.$error"> 
    <div ng-message="required">This is required!</div> 
    </div> 
</md-input-container>        

<md-input-container> 
    <md-button id="registerUser" value="Register" class="md-raised md-primary" ng-click="userForm.$valid && vm.registerUser()" aria-label="login" ng-disabled="login.loginForm.$invalid()"> 
     Create 
    </md-button> 
</md-input-container> 
</form> 

Answer 1

2 noktayı kaçırıyorsunuz.

İlk:type="submit" öğünüzü md-button öğenize ekleyin.

İkincisi: sizin form elemana novalidate ekleyin: novalidate tarayıcının yerli form doğrulama devre dışı bırakmak için kullanılır

Not söyledi.

Ayrıca form elemana ng-submit kullanarak yerine butona ng-click kullanmayı düşünmelisiniz.

<form name="userForm" novalidate ng-submit="userForm.$valid && vm.registerUser()"> 
    <md-input-container> 
     <input name="email" placeholder="Email" data-ng-model="vm.registerUserData.email" required /> 
     <div ng-messages="userForm.email.$error" ng-if='userForm.myControl.$dirty'> 
      <div ng-message="required">This is required!</div> 
     </div> 
    </md-input-container> 

    <md-input-container> 
     <input name="Password" placeholder="Password" data-ng-model="vm.registerUserData.password" required /> 
     <div ng-messages="userForm.Password.$error"> 
      <div ng-message="required">This is required!</div> 
     </div> 
    </md-input-container>        

    <md-input-container> 
     <md-button type="submit" id="registerUser" value="Register" class="md-raised md-primary" aria-label="login" ng-disabled="login.loginForm.$invalid()"> 
      Create 
     </md-button> 
    </md-input-container> 
</form>