如何顯示一些通知，當輸入不正確，並隱藏在輸入正確

我要的是這樣的： https://github.com/PatrickO10/meetUp 如何顯示一些通知，當輸入不正確，並隱藏在輸入正確

當你按下注冊，你可以看到一些紅色的音符。

他的代碼在這裏： https://github.com/PatrickO10/meetUp/blob/master/index.html#L95-L106 我試圖自己寫，但一直失敗，不知道原因。我是這個領域的新人，你能幫我寫嗎？謝謝！這是我簡單的代碼來測試這個部分： https://plnkr.co/edit/OL1QuesgZpqeEKoYS5cF?p=preview

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 




</head> 
<body> 
    <form name=signUpForm> 
    <label for="name"> 
      <span>name:</span> 
      <input type="text" id="nameInput" name="nameInput" class="form-control" placeholder="your name" required autocomplete="name" autofocus ng-model="nameModel"> 
       <div class="input-error" ng-message="signUpForm.nameInput.$error" role="alert" ng-if="signUpForm.nameInput.$touched"> 
        <div ng-message="required"> 
         <p>Input your name please!</p> 
        </div> 
       </div> 

     </label> 
    </form> 

</body> 
</html>

來源

2016-11-05 fourth

將ng-app，ng-controller放置在您的模板中。沒有ng-app，angular將不會引導你的模板。 ng-model，ng-if只能在角度引導應用程序之後才起作用 –

但是在我添加ng-app之後，它不起作用，輸入後便不會消失。 – fourth

<!doctype html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
</head> 
 

 
<body ng-app=""> 
 
    <form name=signUpForm novalidate ng-submit="signUp()"> 
 
    <label for="nameInput">Name:</label> 
 
    <input type="text" id="nameInput" name="nameInput" class="form-control" placeholder="your name" ng-required="true" autocomplete="name" autofocus ng-model="nameModel"> 
 
    <div ng-show="signUpForm.$submitted || signUpForm.nameInput.$touched"> 
 
     <p style="color:red" ng-show="signUpForm.nameInput.$error.required">This field is required</p> 
 
    </div> 
 
    <button type="submit">Submit</button> 
 
    </form> 
 

 
</body> 
 

 
</html>

您需要ng-app初始化程序。希望這個例子能幫助你。

來源

2016-11-05 02:14:12

你可以使用ng消息嗎？我認爲我的代碼不僅是ng-app的問題。源代碼使用了ng-if和ng-message，它的工作原理 – fourth

嘿，我發現第一個'ng-message'應該是'ng-messages'，大聲笑 – fourth

我很高興你找到了解決辦法。 –

如何顯示一些通知，當輸入不正確，並隱藏在輸入正確

回答

相關問題