formgroup的用法

angular中的響應式表單 FormGroup新建，獲取Form Group的值

 

在HTML中：

<form [formGroup]="loginFormGroup"> //將這個FormGroup和FormGroup屬性綁定起來

<div class="div_f">
<div class="div_c_l">
<span> 郵箱地址</span>
</div>
<div class="div_c_r">
<ion-input type="text" style="width:97%; font-size: 0.18rem;" clearInput="true" formControlName="email"></ion-input>
<div class="errorItem" *ngFor="let error of errorMessages.email">
<div class="error-message" *ngIf="loginFormGroup.controls.email.hasError(error.type)&& (loginFormGroup.controls.email.dirty || submitAttempt)">{{ error.message | translate}}
</div>
</div>
</div>
<div style="clear:both"></div>
</div>

<button id="submit" class="btn_1" (click)="submit()">登錄</button>

</form>

在類（ts）文件中：
1.引入
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

2.export class CandidateLoginPage implements OnInit {
errorMessages: any = {
email: [
{ type: 'required', message: 'Name_Required' }
],
valicationCode: [
{ type: 'required', message: 'Name_Required' }
],
password: [
{ type: 'required', message: 'Name_Required' }
],
};
loginFormGroup: FormGroup;
submitAttempt: Boolean = false;
constructor(private fb: FormBuilder,private candidateLoginService:CandidateLoginService,private navCtrl: NavController,private translateService:TranslateService) {
this.loginFormGroup = this.fb.group({
email: ['', Validators.required],
valicationCode: ['', Validators.required],
password: ['', Validators.required],
});
}
submit(){
this.submitAttempt=true;
}