Angular4 양식 응답 함수 예시 분석

이 글은 주로 Angular4 프로그래밍의 양식 응답 기능을 소개하고, Angular4 양식 응답 기능의 구체적인 구현 단계와 관련 운영 기술을 예제 형식으로 분석하여 도움이 필요한 모든 분들께 도움이 되기를 바랍니다. 응답 형식은 응답 형 양식 모듈을 AppModule 파일에 주입해야합니다 첫 번째 방법:

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

두 번째 방법:

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

3 해당 HTML 파일

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

.

그렇습니다. 간단합니다. 반응형 형식은 완벽한.

관련 권장사항:

Angular4의 입력 속성 및 출력 속성에 대한 자세한 설명

Angular4의 프로젝트 준비 및 환경 구축 작업

Angular4.0 데이터 바인딩 문제에 대한 정보

위 내용은 Angular4 양식 응답 함수 예시 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!