web-dev-qa-db-fra.com

Angular 5 validation de formulaire ngx-bootstrap

Je lis le ng-book de Ari Lerner sous Angular 5. J'utilise ngx-bootstrap et Bootstrap 4. La validation du formulaire ne semble pas fonctionner de la façon dont M. Lerner met en œuvre. Je ne suis pas sûr s'il s'agit d'une limitation de ngx-bootstrap... Quelqu'un sait?

edit Ok, j’ai enlevé ngx-bootstrap et viens de charger les MaxCDN pour Bootstrap 4 et j’ai le même problème. Le message d'erreur n'apparaît pas.

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>
angularbootstrap-4ngx-bootstrap
6
mikeglaz

Cela fonctionnera en ajoutant un class="was-validated" au div le plus externe selon la documentation: lien vers la validation du formulaire d’amorçage . Cela initiera la validation sur vos champs. En outre, n'oubliez pas de marquer vos entrées avec required et d'activer la validation HTML par défaut en transmettant au formulaire une novalidate

Exemple de code de travail:

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

Vous pourriez - et devriez probablement, ajouter le class="was-validated" par programme, pas le coder en dur comme je l’ai fait.

Si vous avez des problèmes avec cela, n'hésitez pas à commenter mon post - et je mettrai à jour ma réponse.

4
ChrisEenberg

Des accessoires pour @ChrisEenberg à ce sujet. Si vous souhaitez que chaque champ soit validé en tant que type d'utilisateur, mettez le was-validated sur le groupe de formulaires <div class="form-group row" [ngClass]="{'was-validated': (categoryVar.touched || categoryVar.dirty) && !categoryVar.valid }">

2
irhetoric