Question

我在Angular 5上正在阅读Ari Lerner的<data>...</data>。我正在使用ng-book和ngx-bootstrap。表格验证似乎没有像勒纳先生那样实施。我不确定这是Bootstrap 4的限制......有人知道吗？

修改好的，我删除了ngx-bootstrap，只是加载了ngx-bootstrap的MaxCDN，我遇到了同样的问题。错误消息未显示。

app.module.ts

Bootstrap 4

登记-form.component.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 { }

登记-form.component.html

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);
  }
}

Answer 1

根据文档link to bootstrap form validation，它可以向最外层的div添加class="was-validated"。这将启动您的字段验证。另外，请记住使用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"，而不是像我一样硬编码。

如果您遇到任何问题，请随时评论我的帖子 - 我会更新我的回答。

Answer 2

就此向@ChrisEenberg道具。如果要将每个字段都验证为用户类型，请将已验证的字段放在表单组中 <div class="form-group row" [ngClass]="{'was-validated': (categoryVar.touched || categoryVar.dirty) && !categoryVar.valid }">

Angular 5 ngx-bootstrap表单验证

2 个答案: