Comment implémenter la réponse de formulaire dans 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. Les amis dans le besoin peuvent s'y référer

. Les exemples de cet article décrivent la fonction de réponse de formulaire Angular4. Partagez-le avec tout le monde pour votre référence, comme suit :

Formulaire réactif

1. Les formulaires réactifs doivent être injectés dans le fichier appmodule. Module de formulaire

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

<🎜. > La deuxième méthode :

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

est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir. .

Articles connexes :

Comment obtenir la valeur de SessionStorage à l'aide de JS

Comment utiliser node.js et d'autres technologies pour implémenter la fonction de connexion et d'enregistrement ?

Comment utiliser le filtre dans vue

Problèmes liés à l'évitement de texte dans les algorithmes front-end (tutoriel détaillé)

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!