Угловая проверка формы 5 ngx-bootstrap

Question

Я читаю книгу Ари Лернера ng-book на Angular 5. Я использую ngx-bootstrap а также Bootstrap 4, Проверка формы не работает так, как это делает мистер Лернер. Я не уверен, что это ограничение ngx-bootstrap...Кто-нибудь знает?

редактировать Хорошо, я удалил ngx-bootstrap и просто загрузил MaxCDN для Bootstrap 4 и у меня такая же проблема. Сообщение об ошибке не появляется.

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

Учетно-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);
  }
}

учетно-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 в соответствии с документацией: ссылка на проверку формы начальной загрузки. Это инициирует проверку ваших полей. Кроме того, не забудьте пометить ваши входы required и повернуть проверку HTML по умолчанию, передав форму novalidate

Пример рабочего кода:

<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 }">