如何使用 bootstrap 4 成功和错误类与 Angular 5 ngClass

Question

我的代码有一些问题，我正在尝试了解问题的原因及其来源。所以在这里我在我的输入验证器中添加了 is-valid 和 is-invalid classes，我也尝试使用 has-success 和 has-error classes，但正如我猜的那样它不适用于 bootstrap 4。这是我的 component.html `

<h1 class="page-header">Register Page</h1>

<!-- Registration Form -->
<form [formGroup]='form' (submit)='onRegisterSubmit()'  >
  <div class="form-group">
    <label for="username">Username</label>
    <div [ngClass]="{'is-invalid': (form.controls['username'].errors && form.controls['username'].dirty), 'is-valid': !form.controls['username'].errors}">
      <input type="text" name="username" formControlName="username" class="form-control" autocomplete="off" placeholder="*Username">
      <ul class="help-block">
          <li *ngIf="form.controls['username'].errors?.required && form.controls['username'].dirty">This field is required</li>
          <li *ngIf="form.controls['username'].errors?.minlength && form.controls['username'].dirty || form.controls['username'].errors?.maxlength && form.controls['username'].dirty ">Minimum characters: 3, Maximum characters: 15</li>
          <li *ngIf="form.controls['username'].errors?.validateUsername && form.controls['username'].dirty">Username must not have any special characters</li>
        </ul>
    </div>
  </div>
  <div class="form-group">
    <label for="email">E-mail</label>
    <div [ngClass]="{'is-invalid': (form.controls['email'].errors && form.controls['email'].dirty), 'is-valid': !form.controls['email'].errors}">
      <input type="text" name="email" class="form-control" formControlName="email" autocomplete="off" placeholder="*E-mail">
      <ul class="help-block">
        <li *ngIf="form.controls['email'].errors?.minlength && form.controls['email'].dirty || form.controls['email'].errors?.maxlength && form.controls['email'].dirty ">Minimum characters: 5, Maximum characters: 30</li>
        <li *ngIf="form.controls['email'].errors?.required && form.controls['email'].dirty">This field is required</li>
        <li *ngIf="form.controls['email'].errors?.validateEmail && form.controls['email'].dirty">This must be a valid email</li>
      </ul>
    </div>
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <div [ngClass]="{'is-invalid': (form.controls['password'].errors && form.controls['password'].dirty), 'is-valid': !form.controls['password'].errors}">
      <input type="password" name="password" formControlName="password" class="form-control" autocomplete="off" placeholder="*Password">
      <ul class="help-block">
          <li *ngIf="form.controls['password'].errors?.required && form.controls['password'].dirty">This field is required</li>
          <li *ngIf="form.controls['password'].errors?.minlength && form.controls['password'].dirty || form.controls['password'].errors?.maxlength && form.controls['password'].dirty ">Minimum characters: 8, Maximum characters: 35</li>
          <li *ngIf="form.controls['password'].errors?.validatePassword && form.controls['password'].dirty">Must have at least one uppercase, lowercase, special character, and number</li>
        </ul>
    </div>
  </div>
  <div class="form-group">
    <label for="confirm">Confirm Password</label>
    <div [ngClass]="{'is-invalid': (form.controls['confirm'].errors && form.controls['confirm'].dirty) || (form.errors?.matchingPasswords && form.controls['confirm'].dirty), 'is-valid': !form.controls['confirm'].errors && !form.errors?.matchingPasswords}">
      <input type="password" name="confirm" class="form-control" formControlName="confirm" autocomplete="off" placeholder="*Confirm Password">
      <ul class="help-block">
          <li *ngIf="form.controls['confirm'].errors?.required && form.controls['confirm'].dirty">This field is required</li>
          <li *ngIf="form.errors?.matchingPasswords && form.controls['confirm'].dirty">Password do not match!</li>
        </ul>
    </div>
  </div>
  <input [disabled]="!form.valid" type="submit" class="btn btn-primary" value="Submit">
</form>

这是我的 component.ts `

import { Component, OnInit, group } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {

  form:FormGroup;


  constructor(private formBuilder:FormBuilder) {

    this.createForm();
   }

   createForm(){
    this.form=this.formBuilder.group({
      email:['',Validators.compose([
        Validators.required,
        Validators.minLength(5),
        Validators.maxLength(30),
        this.validateEmail
      ])],
      username:['',Validators.compose([
        Validators.required,
        Validators.minLength(3),
        Validators.maxLength(15),
        this.validateUsername
      ])],
      password:['',Validators.compose([
        Validators.required,
        Validators.minLength(8),
        Validators.maxLength(35),
        this.validatePassword
      ])],
      confirm:['',Validators.required]
    },{validator:this.matchingPasswords('password','confirm')});
  }

  validateEmail(controls){
    const regExp = new RegExp(
      /^(([^<>()\[\]\.,;:\s@"]+(\.[^<>()\[\]\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
    );
      if(regExp.test(controls.value)){
        return null;
      }else{
        return {'validateEmail':true};
      }
  }

  validateUsername(controls){
    const regExp = new RegExp(/^[a-zA-z0-9]+$/);
      if(regExp.test(controls.value)){
        return null;
      }else{
        return {'validateUsername':true};
      }
  }

  validatePassword(controls){
    const regExp = new RegExp(/^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?[\d])(?=.*?[\W]).{8,35}$/);
      if(regExp.test(controls.value)){
        return null;
      }else{
        return {'validatePassword':true};
      }
  }
  matchingPasswords(password,confirm){
    return (group:FormGroup)=>{
      if(group.controls[password].value === group.controls[confirm].value){
        return null;
      }else{
        return {'matchingPasswords':true};
      }
    }
  }

  onRegisterSubmit(){
    console.log("submitted");
  }
  ngOnInit() {
  }
}

我需要这样，当用户在输入中输入内容时，它将 class 更改为成功或错误。我怎样才能做到这一点？

Answer 1

我知道你的问题是很久以前的了，但这是通过反应式表单技术验证表单控制输入字段的最佳方式，bootstrap 4 显示验证。首先，您需要为表单编写一些代码：在 html 部分：

  <form [formGroup]="myForm">
   <div class="form-group">
   <label for="name">first Name: </label>
   <input type="text" class="form-control" formControlName="firstName" id="name">
   <div *ngIf="firstName.touched && firstName.invalid" class="alert alert-danger">
   <div *ngIf="firstName.errors.required">filling name is required!</div>
   </div>
 </div>
 </form>

在ts文件中，你应该实现执行验证的逻辑。

在 ts 文件中：

  myForm = new FormGroup({
  'firstName':new FormControl('',Validators.required)

  })
    //getter method
   get firstName(){
   this.myForm.get('firstName');
   }

现在您可以看到验证正在运行。现在要为输入字段提供样式以在无效输入周围显示红色边框，只需转到组件的 css 文件并将此 class 添加到 css 文件：

    /// invalid
  .form-control.ng-touched.ng-invalid{border:2px solid red;}

   ///valid
    .form-control.ng-touched.ng-invalid{border:2px solid green;}

使用此技术不需要使用 ng class。

如何使用 bootstrap 4 成功和错误类与 Angular 5 ngClass

How to use bootstrap 4 success and error classes with Angular 5 ngClass

bootstrap-4

angular-reactive-forms

angular5

如何使用 bootstrap 4 成功和错误 类 与 Angular 5 ngClass

How to use bootstrap 4 success and error classes with Angular 5 ngClass

bootstrap-4

angular-reactive-forms

angular5

如何使用 bootstrap 4 成功和错误类与 Angular 5 ngClass