Analyse d'un exemple de fonction de réponse de formulaire Angular4

Cet article présente principalement la fonction de réponse de formulaire de la programmation Angular4 et analyse les étapes de mise en œuvre spécifiques et les techniques de fonctionnement associées de la fonction de réponse de formulaire Angular4 sous forme d'exemples. J'espère que cela pourra vous aider. tout le monde.

Formulaire réactif

1. Le formulaire réactif nécessite l'injection du module de formulaire réactif dans le fichier appmodule

import { FormsModule, ReactiveFormsModule } from '@angular/forms'；
<!--
  这里引用模块的时候要注意，具体是哪个module文件使用了表单，
  因为在某些情况下表单是被appmodule下的某个子module文件使用，
  那么就要在该子module文件中引入响应式表单模块。
-->
@NgModule(
  {imports: [FormsModule, ReactiveFormsModule……]
  ……}

2. Référence

dans le composant form.component.ts La première façon :

import { Component } from '@angular/core';
import { FormGroup, FormControl, FormBuilder} from '@angular/forms';
@Component({
 templateUrl: 'forms.component.html'
})
export class FormsComponent {
 formModel: FormGroup;
 constructor(fb: FormBuilder) {
  this.formModel= fb.group({
   formControl1: [''],
   formControl2: [''],
   ……
  });
 }
 onSubmit () {
  console.log(this.formModel.value);
 }
}

Deuxième voie :

import { Component } from '@angular/core';
import { FormGroup, FormControl} from '@angular/forms';
@Component({
 templateUrl: 'forms.component.html'
})
export class FormsComponent {
 formModel: FormGroup; /*这里定义表单变量名，HTML文件中绑定时使用*/
 constructor() {
  this.formModel= new FormGroup({
    formControl1: new FormControl(),
    formControl2: new FormControl(),
    ……
  });
 }
 onSubmit () {
  console.log(this.formModel.value);
 }
}

3. Fichier HTML correspondant

<form action="" method="post" [formGroup]=&#39;formModel&#39;> <!-- 通过指令绑定ts文件中命名的变量名 --!>
  <p class="form-group row">
   <p class="col-md-6">
    <p class="row">
     <label>formControl1</label>
     <input type="text" formControlName=&#39;formControl1&#39;>
    </p>
   </p>
   <p class="col-md-6">
    <p class="row">
     <label>formControl2</label>
    <input type="text" formControlName=&#39;formControl2&#39;>
    </p>
   </p>
  </p>
</form>

À ce stade, un simple formulaire réactif est complet.

Recommandations associées :

Explication détaillée des propriétés d'entrée et des propriétés de sortie d'Angular4

Opérations de préparation de projet et de création d'environnement dans Angular4

À propos des questions de liaison de données Angular4.0

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!