使用Validators导入的Angular 5表单验证

Question

我在角度5中是全新的，我正在尝试使用来自'@ angular / forms'的Validators导入来创建带有验证的表单。此外，我正在使用bootstrap 4来显示有效或无效表单的一些颜色和文本。问题是当我想在输入中显示红色边框颜色时，它显示为绿色，因为没有从“Validator.required”获取条件，但这有点奇怪，因为它显示需要填充的文本这个领域。尝试不同的方式我直接在输入中使用“必需”条件，“已验证”（引导类）在输入中显示红色，但我认为这不是正确的方法，因为我正在使用我的typeScript文件中的“Validators.required”。

data.component.html（需要）

<h4>Formularios <small>data</small></h4>
<hr>
<form [formGroup]="forma" (ngSubmit)="guardarCambios()" novalidate>

  <div>

    <div class="form-group row" [ngClass]="{'was-validated': (forma.controls['nombre'].errors?.required || forma.controls['nombre'].errors?.minlength) && forma.controls['nombre'].touched}">
      <label class="col-2 col-form-label">Nombre</label>
      <div class="col-8">

        <input class="form-control" type="text" placeholder="Nombre" formControlName="nombre" required>

        <div class="invalid-feedback" *ngIf="forma.controls['nombre'].errors?.required">
          El nombre es necesario.
        </div>

        <div class="invalid-feedback" *ngIf="forma.controls['nombre'].errors?.minlength">
          Por lo menos 3 caracteres.
        </div>
      </div>
    </div>

    <div class="form-group row">
      <label class="col-2 col-form-label">Apellido</label>
      <div class="col-8">

        <input class="form-control" type="text" placeholder="Apellido" formControlName="apellido">
      </div>
    </div>

  </div>

  <div class="form-group row">
    <label class="col-2 col-form-label">Correo</label>
    <div class="col-md-8">

      <input class="form-control" type="email" placeholder="Correo electrónico" formControlName="correo">
    </div>
  </div>

  <div class="form-group row">
    <label class="col-2 col-form-label">&nbsp;</label>
    <div class="input-group col-md-8">
      <button type="submit" class="btn btn-outline-primary">
        Guardar
      </button>
    </div>
  </div>

</form>

data.component.html（不需要）

<h4>Formularios <small>data</small></h4>
<hr>
<form [formGroup]="forma" (ngSubmit)="guardarCambios()" novalidate>

  <div>

    <div class="form-group row" 
         [ngClass]="{'was-validated': (forma.controls['nombre'].errors?.required || 
                    forma.controls['nombre'].errors?.minlength) && 
                    forma.controls['nombre'].touched}">
      <label class="col-2 col-form-label">Nombre</label>
      <div class="col-8">

        <input class="form-control" type="text" placeholder="Nombre" formControlName="nombre">

        <div class="invalid-feedback" *ngIf="forma.controls['nombre'].errors?.required">
          El nombre es necesario.
        </div>

        <div class="invalid-feedback" *ngIf="forma.controls['nombre'].errors?.minlength">
          Por lo menos 3 caracteres.
        </div>
      </div>
    </div>

    <div class="form-group row">
      <label class="col-2 col-form-label">Apellido</label>
      <div class="col-8">

        <input class="form-control" type="text" placeholder="Apellido" formControlName="apellido">
      </div>
    </div>

  </div>

  <div class="form-group row">
    <label class="col-2 col-form-label">Correo</label>
    <div class="col-md-8">

      <input class="form-control" type="email" placeholder="Correo electrónico" formControlName="correo">
    </div>
  </div>

  <div class="form-group row">
    <label class="col-2 col-form-label">&nbsp;</label>
    <div class="input-group col-md-8">
      <button type="submit" class="btn btn-outline-primary">
            Guardar
          </button>
    </div>
  </div>

</form>

data.component.ts

import { Component } from "@angular/core";
import { FormGroup, FormControl, Validator, Validators } from "@angular/forms";

@Component({
  selector: "app-data",
  templateUrl: "./data.component.html",
  styles: []
})
export class DataComponent {
  forma: FormGroup;

  constructor() {
    this.forma = new FormGroup({
      nombre: new FormControl("", [
        Validators.required,
        Validators.minLength(3)
      ]),
      apellido: new FormControl("", Validators.required),
      correo: new FormControl("", [
        Validators.required,
        Validators.pattern("[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,3}$")
      ])
    });
  }

  guardarCambios() {
    console.log(this.forma.value);
    console.log(this.forma);
  }
}