Comment implémenter la réponse de formulaire dans Angular4-js tutoriel-php.cn

Comment implémenter la réponse de formulaire dans Angular4

亚连

Libérer： 2018-06-20 18:21:17

original

1182 Les gens l'ont consulté

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

Copier après la connexion

2. Référence

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

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

Copier après la connexion

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

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

Copier après la connexion

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>

Copier après la connexion

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