html 为什么“required”在我的Angular 形式中不起作用？

gab6jxml 于 2023-01-15 发布在 Angular

关注(0)|答案(1)|浏览(287)

我是一个很新的Angular 。下面是我的模板文件注册页面的Angular 。我已经添加了所有的标签和输入内的形式标记。我有一个按钮命名为注册类型提交。为什么在点击注册默认行为的要求是不显示？我使用引导样式。

<div class="register-page">
        <div class="card register-form-box shadow-lg p-3 mb-5 bg-white rounded">
            <div class="card-header">
                <h4>Register</h4>
            </div>
            <form class="card-body">
                <div class="form-gorup">
                    <label class="fw-bold" for="username">Username</label>
                    <input class="form-control" id="username" type="text" [(ngModel)]="userName" name="username" required>
                </div>
                <div class="form-gorup mt-3">
                    <label class="fw-bold" for="email">Email</label>
                    <input class="form-control" id="email" type="email" [(ngModel)]="email" name="email" required>
                </div>
                <div class="form-gorup mt-3">
                    <label class="fw-bold" for="inpname">Infrastructure Provider Name</label>
                    <input class="form-control" id="inpname" type="text" [(ngModel)]="inpName" name="inpname" required>
                </div>
                <div class="form-gorup mt-3">
                    <label class="fw-bold" for="password">Password</label>
                    <input class="form-control" id="password" type="password" [(ngModel)]="password" name="password" required>
                </div>
                <div class="form-gorup mt-3">
                    <label class="fw-bold" for="repassword">Retype Password</label>
                    <input class="form-control" id="repassword" type="password" [(ngModel)]="rePassword" name="repassword" required>
                </div>
                <div class="mt-4 row">
                    <div class="col-sm-6">
                        <button class="btn btn-primary w-75" type="submit" (click)="onRegister()">Register</button>
                    </div>
                    <div class="col-sm-6">
                        <a routerLink="/login">Already registered?</a>
                    </div>
                </div>
            </form>
        </div>
    </div>

Html

来源：https://stackoverflow.com/questions/75081645/why-is-required-not-working-in-my-angular-form

1条答案

按热度按时间

hsvhsicv1#

很可能您的表单控件由于required属性而被正确地标记为无效，但是您的HTML/CSS中没有任何内容被触发以响应无效状态。
查看Angular 文档了解如何在模板驱动的表单上实现验证。
您的用例示例如下：
.html

<div class="form-gorup">
  <label
    class="fw-bold"
    for="username">
    Username
  </label>

  <input
   class="form-control"
   id="username"
   type="text"
   #UserName="ngModel"
   [(ngModel)]="userName"
   name="username"
   required />

  <p
    *ngIf="UserName.errors?.['required']"
    class="your-form-error-style">
    Username is required
  </p>
</div>

或者，如果您只对CSS样式的输入字段本身的有效性感兴趣，则可以查看输入上的:valid和:invalid伪类。
.html

<input
   class="form-control"
   id="username"
   type="text"
   [(ngModel)]="userName"
   name="username"
   required />

.css

input.form-control:valid {
  border: 2px solid red;
}

但是请注意，这些只反映了有效状态，而不是失败的特定验证器，因此，我总是选择第一种方法，即用#TemplateVariable="ngModel"公开底层NgControl

赞(0）回复(0）举报 2023-01-15

我来回答

html 为什么“required”在我的Angular 形式中不起作用？

1条答案

相关问题

热门标签

最新问答