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

1100 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 '@angular/forms'；

@NgModule(
  {imports: [FormsModule, ReactiveFormsModule……]
  ……}

Copy after login

2, reference in form.component.ts component

First way:

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

Copy after login

Second way :

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

Copy after login

3. The corresponding HTML file

 
  
   

    

     formControl1
     
    
   
   
    

     formControl2

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!