web-dev-qa-db-fra.com

Formes Angular2: Validations, ngControl, ngModel etc.

Travailler sur angular2 beta Forms. après beaucoup de recherches n'a rien trouvé d'utile. j'espère que quelqu'un m'aidera.

Fondamentalement, je suis un peu confus sur la façon d'utiliser correctement les formulaires dans angular2 (c'est-à-dire en utilisant ngControl, ngFormControl, etc.). j'ai créé un plnkr ici

http://plnkr.co/edit/fictP28Vqn74YqrwM1jW?p=preview

voici mon code .html: -

<form class="form-horizontal" id='myForm' role="form" [ngFormModel]="CreateGroup">

  <div class="col-md-7">
Name: <input type="text" id="name" placeholder="Name" class="form-control" ngControl="name">
  </div>
  <div class="col-md-7">
  Password:   <input type="text" id="password" placeholder="password" class="form-control" ngControl="password">
  </div>

  <div class="col-md-7">
    <input type="radio" name='type'>Btech
    <input type="radio" name='type'>Mtech
  </div>

  <div class="col-md-7">
    <input type="checkbox" >Math
    <input type="checkbox">English
    <input type="checkbox">Science
  </div>
  <br>
  <div class="col-md-7">
    <select #selectOption (change)='getValue(selectOption.value)' class='form-control'>
      <option value='1'>One Value</option>
      <option value='2'>two Value</option>
      <option value='3'>Three Value</option>
    </select>
  </div>
</form>
<button type="button" (click)="addNewGroup(CreateGroup.value)" class="btn btn-primary btn-lg"> Create </button>

et le code .ts est ici: -

CreateGroup: FormBuilder;
  constructor(fb: FormBuilder){
    console.log('form called');

    this.CreateGroup = fb.group({
            'name': new Control(),
            'password': new Control()
        })
  }
  addNewGroup(value) {
    console.log(value);
    document.getElementById("myForm").reset();
  }

  getValue(value){
    console.log(value);
  }

je ne peux pas comprendre comment obtenir des valeurs en tant qu'objet à partir d'un formulaire complet. mon formulaire comprend des zones de texte, des cases à cocher, une radio et certaines options. voici maintenant quelques-unes de mes questions.

Q1: - Comment obtenir les valeurs de la radio, case à cocher, sélectionnez en utilisant le formulaire dans angular2. (Je ne veux pas appeler change hook pour sélectionner l'option comme je l'ai utilisé dans le plnkr).

Q2: - comme dans le plnkr après avoir soumis le contrôle du formulaire de données n'a pas été réinitialisé. Le contrôle du formulaire reste présent mais le formulaire semble réinitialisé. alors comment réinitialiser le contrôle des formulaires en angular2.

Q3: - quelle est la meilleure méthode pour utiliser la validation dans les formulaires (si quelqu'un a plnkr montrant la validation, veuillez le poster).

j'avais lu cet article sur les formulaires mais je n'ai toujours pas réussi avec les cases à cocher radio et les options de sélection.

http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2

angularformsvalidationangular-validation
12
Pardeep Jain

Liaison des contrôles de formulaire à un modèle de domaine

Initialisez le modèle de domaine au sein de votre composant:

constructor(){
  this.student = new Student();
}

Utilisez ngModel pour lier les contrôles de formulaire à un modèle de domaine avec une liaison de modèle bidirectionnelle.

Name: <input [(ngModel)]="student.name" type="text">
Password:  <input [(ngModel)]="student.password" type="text">

Lorsque vous cliquez sur le bouton, passez le modèle de domaine en argument:

<button type="button" (click)="addNewGroup(student)">Create</button>

Implémentez la méthode addNewGroup. Pour réinitialiser le formulaire, mettez à jour le modèle de domaine avec un nouveau modèle:

addNewGroup(student:Student) {
  alert('added ' + student.name);
  this.student = new Student();
}

Demo Plnkr

Ajout de validateurs au formulaire

Pour ajouter la validation du formulaire, ajoutez ngFormModel à l'élément de formulaire et ajoutez ngControl décorateurs à chaque élément d'entrée (ngControl est le sucre syntaxique pour [ngFormControl]="studentForm.controls['name']"):

<form [ngFormModel]="studentForm" />
   <input type="text" ngControl="name" />
   <input type="text" ngControl="password" />
</form>

ngFormModel correspond à une propriété ControlGroup de votre composant. Initialisez le ControlGroup avec un objet de configuration dont les noms de propriété correspondent aux valeurs des attributs ngControl:

constructor(fb: FormBuilder){
  this.student = new Student();
  this.studentForm = fb.group({
     'name': new Control(this.student.name, Validators.required),
     'password': new Control(this.student.password, Validators.required)
  });
}

Dans l'exemple ci-dessus, le validateur required intégré est utilisé pour indiquer que le nom et le mot de passe sont des champs obligatoires. Vous pouvez ensuite vérifier si le formulaire entier est valide en utilisant la propriété valid sur le modèle de formulaire:

addNewGroup(student:Student) {
    if (this.studentForm.valid) {
      alert('added ' + student.name);
      this.student = new Student();
    }
    else {
      alert('form is not valid!');
    }
}

Demo Plnkr

Affichage des messages de validation

Si vous souhaitez vous lier aux messages de validation dans la vue, vous pouvez exporter le contrôle en tant que variable de modèle local et accéder à ses propriétés de validation: valide, sale, en attente, vierge et l'objet erreurs.

 <input ngControl="name" #name="ngForm" type="text">
 <span [hidden]="name.valid"><b>Required</b></span>

Demo Plnkr

Si vous souhaitez créer votre propre validateur personnalisé, créez une méthode qui renvoie un objet de validation dont les propriétés boolean correspondent à des erreurs de validation. Par exemple, vous pouvez créer un validateur qui garantit que la première lettre d'un mot de passe doit être numérique:

interface ValidationResult {
 [key:string]:boolean;
}
class PasswordValidator {
 static startsWithNumber(control: Control): ValidationResult { 
   if ( control.value && control.value.length > 0){
     if (isNaN(control.value[0]))
      return { 'startsWithNumber': true };
   }

   return null;
 } 
}

Composez les validateurs ensemble dans un validateur et passez-le au constructeur Control à l'aide du Validators.compose Intégré:

this.studentForm = fb.group({
   'name': new Control(this.student.name, Validators.required),
   'password': new Control(this.student.password, Validators.compose([Validators.required,PasswordValidator.startsWithNumber])),
});

Si vous avez plusieurs validateurs sur le même Control, utilisez l'objet errors pour les distinguer:

<input ngControl="password" #password="ngForm" />
<span [hidden]="!password.control.hasError('required')"><b>Required</b></span>
<span [hidden]="!password.control.hasError('startsWithNumber')"><b>Must start with number</b></span>

Demo Plnkr

Liaison aux listes de boutons radio

Dans Angular2, il n'y a pas encore de support intégré pour se lier aux listes de boutons radio. Consultez cet article pour savoir comment procéder:

Angular2 - Liaison des boutons radio

26
pixelbits

MISE À JOUR - FORMULAIRES ANGULAR2 RC4

TL; DR;

Après la publication des formulaires RC angular2, de nombreuses modifications ont été apportées aux formulaires angular2. il y en a certains sont des changements de rupture majeurs certains d'entre eux sont négligeables, voici quelques points clés pour l'utilisation des formes angulaires2.

Fondamentalement, il existe deux façons de créer des formulaires dans Angular 2, à savoir piloté par modèle et piloté par modèle. La structure de base pour l'utilisation de formulaires est la suivante: -

  • courir npm install @angular/forms --save

  • configurez la méthode bootstrap pour votre application comme suit:

    bootstrap(AppComponent, [
  disableDeprecatedForms(), // disable deprecated forms
  provideForms(), // enable new forms module
]);

  • utilisation REACTIVE_FORM_DIRECTIVES aux directives de composant pour utiliser la fonctionnalité des formulaires.

  • créer une variable de formulaire de type FormGroup
  • Utilisez Validators à des fins de validation.

à part cela FormBuilder n'est pas obligatoire pour construire un formulaire piloté par modèle, mais il simplifie la syntaxe. il existe trois syntaxe/méthode de base fournies par formbuilder:

  • groupe : construire un nouveau groupe de formulaires.
  • tableau : construire un nouveau tableau de formulaire.
  • contrôle : construire un nouveau contrôle de formulaire.

Ce sont les étapes de base pour utiliser les formulaires dans angular2 RC.

Ressources utiles pour les formulaires angular2:

Démo en direct pour la même chose ici

Working Demo for angular2 Forms

4
Pardeep Jain