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

我在我的代码中有一些问题，我正在试图理解其原因以及它的来源。所以在这里，我在我的输入验证器中添加了is valid和is invalid类，我也尝试使用has success和has error类，但我猜它对bootstrap4不起作用。这是我的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>

注册页面
用户名

此字段为必填字段
最小字符数：3个，最大字符数：15个
用户名不能有任何特殊字符

电子邮件

最小字符数：5个，最大字符数：30个
此字段为必填字段
这必须是一封有效的电子邮件

密码

此字段为必填字段
最小字符数：8个，最大字符数：35个
必须至少有一个大写、小写、特殊字符和数字

确认密码

此字段为必填字段
密码不匹配

这是我的组件`

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() {
  }
}

从'@angular/core'导入{Component，OnInit，group}；
从“@angular/forms”导入{FormBuilder、FormGroup、Validators}；
@组成部分({
选择器：“应用程序寄存器”，
templateUrl:“./register.component.html”，
样式URL:['./register.component.css']
})
导出类RegisterComponent实现OnInit{
表格：表格组；
构造函数（专用formBuilder:formBuilder）{
这个.createForm（）；
}
createForm（）{
this.form=this.formBuilder.group({
电子邮件：[''，Validators.compose([
需要验证器，
验证器。最小长度（5），
验证器。最大长度（30），
这是一封电子邮件
])],
用户名：[''，Validators.compose([
需要验证器，
验证器。最小长度（3），
验证程序。最大长度（15），
这个.validateUsername
])],
密码：[''，Validators.compose([
需要验证器，
验证器。最小长度（8），
验证器。最大长度（35），
这是一个密码
])],
确认：[''，验证器。必需]
}，{validator:this.matchingPasswords（'password'，'confirm'）}）；
}
validateEmail（控件）{
const regExp=新regExp(
/^（[^（）\[\]\\，；：\s@“]+（\.[^（）\[\]\，；：\s@“]+）*）（“+”）（\[[0-9]{1,3}.[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））{
返回null；
}否则{
返回{'validateEmail'：true}；
}
}
validateUsername（控件）{
const regExp=新的regExp（/^[a-zA-z0-9]+$/）；
if（regExp.test（controls.value））{
返回null；
}否则{
返回{'validateUsername'：true}；
}
}
validatePassword（控件）{
常量regExp=newregexp（/^（？=.[a-z]）（？=.[a-z]）（？=..[\d]）（？=.[\W]）{8,35}$/；
if（regExp.test（controls.value））{
返回null；
}否则{
返回{'validatePassword'：true}；
}
}
匹配密码（密码，确认）{
返回（组：FormGroup）=>{
if（group.controls[password].value==group.controls[confirm].value）{
返回null；
}否则{
返回{'matchingPasswords'：true}；
}
}
}
onRegisterSubmit（）{
控制台日志（“已提交”）；
}
恩戈尼尼特（）{
}
}

---

我需要的是，当用户在输入中键入某些内容时，它会将类更改为success或error。我该怎么做

我知道您的问题很久以前就提出了，但这是通过反应式表单技术和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>

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

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

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

使用这种技术不需要使用ng类

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

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