Angular 4 프로 그래 밍 폼 응답 기능 예제

본 논문 의 사례 는 Angular 4 폼 응답 기능 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
응답 식 폼
1.응답 식 폼 은 app module 파일 에 응답 식 폼 모듈 을 주입 해 야 합 니 다.

import { FormsModule, ReactiveFormsModule } from '@angular/forms'；
<!--
              ，     module       ，
              appmodule     module    ，
         module            。
-->
@NgModule(
  {imports: [FormsModule, ReactiveFormsModule……]
  ……}

2.form.component.ts 구성 요소 에서 참조
첫 번 째 방법:

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

두 번 째 방식:

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

3.대응 하 는 HTML 파일

<form action="" method="post" [formGroup]='formModel'> <!--       ts          --!>
  <div class="form-group row">
   <div class="col-md-6">
    <div class="row">
     <label>formControl1</label>
     <input type="text" formControlName='formControl1'>
    </div>
   </div>
   <div class="col-md-6">
    <div class="row">
     <label>formControl2</label>
    <input type="text" formControlName='formControl2'>
    </div>
   </div>
  </div>
</form>

이로써 간단 한 응답 식 폼 이 완성 되 었 다.
AngularJS 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있 습 니 다.AngularJS 명령 조작 기법 총화,AngularJS 입문 및 진급 강좌과AngularJS MVC 구조 총화
본 고 에서 말 한 것 이 여러분 의 AngularJS 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.