Angular 5 ngx-bootstrap 表单验证

Question

我正在阅读 Ari Lerner 的关于 Angular 5 的 ng-book。我正在使用 ngx-bootstrap 和 Bootstrap 4。表单验证似乎并不像 Lerner 先生实现的那样有效。我不确定这是否是 ngx-bootstrap 的限制...有人知道吗？

编辑好的，我删除了 ngx-bootstrap 并为 Bootstrap 4 加载了 MaxCDN，但我遇到了同样的问题。错误消息没有出现。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { RegistrationFormComponent } from './registration-form/registration-form.component';
import {
  FormsModule,
  ReactiveFormsModule,
  FormBuilder,
  FormGroup
} from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    RegistrationFormComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

registration-form.component.ts

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

@Component({
  selector: 'app-registration-form',
  templateUrl: './registration-form.component.html',
  styleUrls: ['./registration-form.component.scss']
})
export class RegistrationFormComponent implements OnInit {
  regForm: FormGroup;
  // name: AbstractControl;

  constructor(fb: FormBuilder) {
    this.regForm = fb.group({
      'name': ['', Validators.required],
      // 'email': ['', Validators.required],
      // 'password': ['', Validators.required],
      // 'password_confirmation': ['', Validators.required]
    });

    // this.name = this.regForm.controls['name'];
  }

  ngOnInit() {
  }

  onSubmit(value: string): void{
    console.log(value);
  }
}

registration-form.component.html

<div class="row justify-content-center">
  <h1>New User</h1>
</div>

<div class='row justify-content-center'>
  <div class='col-6'>
    <form [formGroup]='regForm'
    (ngSubmit)="onSubmit(regForm.value)"
    [class.error]="!regForm.valid && regForm.touched"
    >
      <div class='form-group'
        [class.error]="!regForm.get('name').valid && regForm.get('name').touched">
        <label>Name</label>
        <input type="text" class='form-control' [formControl]="regForm.controls['name']">
        <div *ngIf="regForm.controls['name'].hasError('required')" class="invalid-feedback">Name is required</div>
      </div>
      <div class='form-group'>
        <label>Email</label>
        <input type="email" class='form-control'>
      </div>
      <div class='form-group'>
        <label>Password</label>
        <input type="password" class='form-control'>
      </div>
      <div class='form-group'>
        <label>Confirmation</label>
        <input type="password" class='form-control'>
      </div>
      <button type="submit" class='btn btn-default'>Submit</button>
    </form>
  </div>
</div>

Answer 1

根据文档，它会通过将 class="was-validated" 添加到最外层的 div 来工作:link to bootstrap form validation .这将启动对您的字段的验证。此外，请记住使用 required 标记您的输入，并通过向表单传递 novalidate

来关闭默认的 html 验证

工作代码示例:

<div class="container" class="was-validated">
  <form [formGroup]="regForm" novalidate (ngSubmit)="submitForm(regForm.value)">
    <div class="row justify-content-center">
      <div class="form-group col-6">
        <label class="col-12 col-form-label" for="email">Email</label>
        <input type="email" placeholder="Email address" class="form-control form-control-lg col-12" id="email" [formControl]="regForm.controls['email']"
          required>
        <div class="invalid-feedback">
          Please provide a valid email.
        </div>
      </div>
    </div>

    <div class="row justify-content-center">
      <div class="form-group col-6">
        <label class="col-12 col-form-label" for="password">Password</label>
        <input type="password" placeholder="Password" id="password" class="form-control form-control-lg col-12" [formControl]="regForm.controls['password']" required>
        <div class="invalid-feedback">
          Please provide a password.
        </div>
      </div>
    </div>

    <div class="row justify-content-center">
      <div class="form-group col-6">
        <button type="submit" class="btn btn-outline-secondary btn-block col-12">Sign in</button>
      </div>
    </div>
  </form>
</div>

您可以 - 并且可能应该以编程方式添加 class="was-validated"，而不是像我那样对其进行硬编码。

如果您对此有任何疑问，请随时评论我的帖子 - 我会更新我的答案。