我正在为 Web 应用程序制作注册表单,我正在尝试将某些字段设为必填,并预先选中其中一个单选按钮,但“必填”和“已选中”输入标签似乎都没有任何效果。我使用 Firefox 作为我的浏览器和引导 css 类。
当我取出所有与 Angular 相关的代码(ngForm、ngModel 和 *ngIf 错误消息)并像纯 html/css 一样在浏览器中打开它时,单选按钮会被选中,并且必填字段会按应有的方式工作。所以我一定是在我的 Angular 代码上犯了一些逻辑错误,我对它还很陌生。
<div class="container">
<div class="row">
<div class="col-12">
<h1>Registration</h1>
</div>
</div>
<form #regForm="ngForm" method="POST" (ngSubmit)= "registrate()">
<div class="row">
<div class="col-sm-4">
<label for="firstName">*First name:</label>
</div>
<div class="col-sm-8">
<input
type="text"
id="firstName"
class="form-control"
name = "firstName"
#firstName = "ngModel"
[(ngModel)] = "user.firstName"
required/>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<label for="lastName">*Last name:</label>
</div>
<div class="col-sm-8">
<input
type="text"
id="lastName"
class="form-control"
name = "lastName"
#lastName = "ngModel"
[(ngModel)] = "user.lastName"
required/>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<label for="email">*E-mail:</label>
</div>
<div class="col-sm-8">
<input
type="text"
id="email"
class="form-control"
name = "email"
#email = "ngModel"
[(ngModel)] = "user.email"
required/>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<label for="occupation">Occupation:</label>
</div>
<div class="col-sm-8">
<input
type="text"
id="occupation"
class="form-control"
name = "occupation"
[(ngModel)] = "user.occupation"/>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<label for="username">*Username:</label>
</div>
<div class="col-sm-8">
<input
type="text"
id="username"
class="form-control"
name = "username"
#username = "ngModel"
[(ngModel)] = "user.username"
required/>
</div>
</div>
<div class="row" *ngIf="regForm.submitted && nameExists">
<div class="col-sm-6" style="margin: auto">
<p style="color: red; text-align: center">The desired username already exists</p>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<label for="password1">*Password:</label>
</div>
<div class="col-sm-8">
<input
type="password"
id="password1"
class="form-control"
name = "password1"
pattern="^(?=.{8,12}$)(?!.*(\S)\1{2})(?=.*[A-Z])(?=.*[a-z]{3})(?=.*\d)(?=.*[^a-zA-Z0-9])([a-zA-Z]\S*)$"
#password1 = "ngModel"
[(ngModel)] = "user.password1"
required/>
</div>
</div>
<div class="row" *ngIf="regForm.submitted && password1?.errors.pattern">
<div class="col-sm-6" style="margin: auto">
<p style="color: red; text-align: center">Bad password!</p>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<label for="password2">*Re-enter your password:</label>
</div>
<div class="col-sm-8">
<input
type="password"
id="password2"
class="form-control"
name = "password2"
#password2 = "ngModel"
[(ngModel)] = "checkPassword"
required/>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<label>Gender:</label>
</div>
<div class="col-sm-4">
<label for="male">male:</label>
<input
type="radio"
name="gender"
id="male"
value="male"
checked
#gender1 = "ngModel"
[(ngModel)] = "user.gender"/>
</div>
<div class="col-sm-4">
<label for="female">женски:</label>
<input
type="radio"
name="gender"
id="female"
value="female"
#gender2 = "ngModel"
[(ngModel)] = "user.gender"/>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<label for="idNumber">*ID number:</label>
</div>
<div class="col-sm-8">
<input
type="text"
id="idNumber"
class="form-control"
name = "idNumber"
#idNumber = "ngModel"
[(ngModel)] = "user.idNumber"
required/>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<label for="question">*Security question:</label>
</div>
<div class="col-sm-8">
<input
type="text"
id="question"
class="form-control"
name = "question"
#question = "ngModel"
[(ngModel)] = "user.question"
required/>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<label for="answer">*Answer:</label>
</div>
<div class="col-sm-8">
<input
type="text"
id="answer"
class="form-control"
name = "answer"
#answer = "ngModel"
[(ngModel)] = "user.answer"
required/>
</div>
</div>
<div class="row" *ngIf="regForm.submitted && (firstName.invalid || lastName.invalid || email.invalid || username.invalid || password1.invalid || password2.invalid || idNumber.invalid || question.invalid || answer.invalid)">
<div class="col-sm-6" style="margin: auto">
<p style="color: red; text-align: center">Input fields marked with * must be filled!</p>
</div>
</div>
<div class="row">
<div class="col-12" style="text-align: center">
<button type="submit" class="btn btn-primary">
Register
</button>
</div>
</div>
</form>
</div>
请注意,我的 .ts 类具有以下字段: user 是一个对象,其中包含此处使用的所有字段, checkPassword 是用于匹配密码的字符串, nameExists 是设置为 false 的布尔值,registrate() 是一个函数,它什么都不做现在。