使用 $touched 和 $error 进行表单验证

Question

我正在尝试使用 AngularJS 提供的 built-in validation mechanisms 实现客户端验证。

我有一个email 类型的简单输入，如果使用$submitted 提交表单或使用$touched 控件失去焦点后电子邮件无效，则必须显示错误。

<form name="form" novalidate>
    <div class="form-group">
        <label for="input-emailaddress">Adresse email</label>
        <input type="email" class="form-control" name="input-emailaddress" placeholder="Entrez votre email" ng-model="user.email" required="required">
        <div ng-show="form.$submitted || form.input-emailaddress.$touched">
            <div ng-show="form.input-emailaddress.$error.email">Please insert a valid email address.</div>
        </div>
    </div>
</form>

但是当我输入一个无效的电子邮件地址时没有触发错误。 $submitted 工作正常，因为如果我删除所有其他条件，一旦触发该消息就会出现，但是当我需要访问特定字段 (form.input-emailaddress) 时，验证不起作用。

谁能帮我弄清楚为什么这不起作用？

Answer 1

当您使用 . 访问 JSON 对象时，您的变量不应包含任何字符，如 - 或不应以数字变量开头。你应该像form["input-emailaddress"]一样访问form.input-emailaddress 因为它在名称中包含连字符将不起作用

更新

根据@SunilD 的建议，我们可以将名称更改为不应该遵循这样的标准，您可以使用cammel case 而不是这样做