时间戳

首页 > 解决方案 > 必需和检查的输入标签在 Angular 组件中不起作用

html - 必需和检查的输入标签在 Angular 组件中不起作用

问题描述

我正在为 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() 是一个函数，它什么都不做现在。

标签： htmlangularvalidationangular-template-form

解决方案

角度中的这些属性（必需和检查）应如下面的示例所示使用。

<input type="text" id="test2" name="test2" [(ngModel)]="test" [required]="true">

和

<input type="checkbox" [checked]="true" />

推荐阅读