Question

我正在尝试使用角度j来验证电子邮件表单。但是，无效或有效时，“跨度”不会显示。为什么？如果我从身体标签中取出ng-app =“”，那么无论表格是否有效，它们都会一直出现。

<!DOCTYPE HTML>
<html lang = "en">
<meta charset = "utf-8">
    <head>

        <title>Email Us</title>

        <link rel = "stylesheet" href = "../style/style.css"/>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src = "../js/callmail.js"></script>

    </head>

    <body ng-app = "">

        <form name = "contact">

            <label for = "subject" class = "control-label">Subject:</label>
            <input id = "subject" ng-model = "subject" required/>
            <span class = "warning" ng-show="contact.subject.$touched && contact.subject.$invalid">You Must Enter a subject!</span>
            <span class = "success" ng-show="contact.subject.$touched && contact.subject.$valid">Valid!</span>

            <br/>

            <label for = "body" class = "control-label">Body:</label>
            <input id = "body" ng-model = "body" required/>
            <span class = "warning" ng-show="contact.body.$touched && contact.body.$invalid">Your email must have a body!</span>
            <span class = "success" ng-show="contact.body.$touched && contact.body.$valid">Valid!</span>

            <br/>

            <label for = "signature" class = "control-label">Return Email:</label>
            <input id = "signature" ng-model = "signature" type = "email" required/>
            <span class = "warning" ng-show="contact.signature.$touched && contact.signature.$invalid">You must enter a valid return email!</span>
            <span class = "success" ng-show="contact.signature.$touched && contact.signature.$valid">Valid!</span>

            <br/>

            <button ng-disabled = "contact.$invalid" id = "sendmail" type = "submit" class = "btn btn-success">Submit</button>

        </form>

    </body>
</html>

Answer 1

为每个输入元素赋予name属性，并使用该name属性而不是id属性来检查span标记。

改变这个：

<input id = "subject" ng-model = "subject" required/>

到此：

<input id = "subject" name = "subject" ng-model = "subject" required/>

为什么警告和成功消息不会显示在此代码中

1 个答案: