Angular4 form response function example analysis-JS Tutorial-php.cn

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 it. I hope it can help everyone.

Responsive form

1. The responsive form needs to inject the responsive form module into the appmodule file

import { FormsModule, ReactiveFormsModule } from '@angular/forms'；  @NgModule( {imports: [FormsModule, ReactiveFormsModule……] ……}

Copy after login

2. Reference

in the form.component.ts component. The 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. Corresponding HTML file

   
 
 formControl1  
 
  
 formControl2

Copy after login

##At this point, a simple responsive form is completed.

Related recommendations:

Detailed explanation of the input properties and output properties of Angular4

Project preparation and environment building operations in Angular4

About Angular4.0 data binding matters

The above is the detailed content of Angular4 form response function example analysis. For more information, please follow other related articles on the PHP Chinese website!