How to implement form response in Angular4-JS Tutorial-php.cn

How to implement form response in Angular4

亚连

Release： 2018-06-20 18:21:17

Original

1282 people have browsed it

This article mainly introduces the form response function of Angular4 programming, and analyzes the specific implementation steps and related operating techniques of the Angular4 form response function in the form of examples. Friends in need can refer to the following

The examples in this article describe Angular4 form response function. Share it with everyone for your reference, the details are as follows:

Responsive form

1. The responsive form needs to be injected into the appmodule file. Form module

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

Copy after login

2, reference in form.component.ts component

First way:

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

Copy after login

Second way :

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

Copy after login

3. The corresponding HTML file

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

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to get the value of SessionStorage using JS

How to use node.js and other technologies to implement the login and registration function?

How to use filter in vue

Issues about text avoidance in the front-end algorithm (detailed tutorial)

The above is the detailed content of How to implement form response in Angular4. For more information, please follow other related articles on the PHP Chinese website!