我有一个角度4反应形式与验证。此表单有一个“保存”和“取消”按钮。当我点击输入验证然后立即点击取消按钮后,取消按钮点击事件不会被触发,因为我所在的输入无效并显示验证消息。
点击'取消'不必进行验证。
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { Observable } from "rxjs/Rx";
import { UserProfile } from "app/agencies/models/agency-userprofile.model";
import { SelectListItem } from "app/shared/models/select-list.model";
import { Globals } from "app/shared/services/globals.service";
import { AgencyService } from "app/agencies/services/agency.service";
import { AgencyUserService } from "app/agencies/services/agency-user.service";
import { FormErrorHandlerService } from "app/shared/services/form-error-handler.service";
import { MessageBoxService } from "app/core/message-box/services/message-box.service";
import { MessageBox } from "app/core/message-box/models/message-box.model";
@Component({
selector: 'app-agency-admin',
templateUrl: './agency-admin.component.html',
styleUrls: ['./agency-admin.component.css']
})
export class AgencyAdminComponent implements OnInit {
@Input() agencyuser: UserProfile;
dbUser: UserProfile;
@Output() boxIsClosed = new EventEmitter();
@Output() userChanged = new EventEmitter();
isNewUser = false;
//required for async validators
existingEmail = "";
loadingUser = false;
loadingStyle = Globals.sectionLoadingStyle;
agencyAdminForm: FormGroup;
//generic error message settings
errorMessage: any;
hasErrored = false;
//global data
statuses: SelectListItem[] = [];
public customClass: string = 'customClass';
constructor(private agencyService: AgencyService,
private agencyUserService: AgencyUserService,
private formErrorService: FormErrorHandlerService,
private messageService: MessageBoxService) {
}
ngOnInit() {
//set if EDIT or NEW
if (this.agencyuser == undefined)
this.isNewUser = true;
//get all global data
this.statuses = this.agencyService.getUserStatuses();
//here the form and all validators ect must be created
this.agencyAdminForm = new FormGroup({
'FirstName': new FormControl('TestValidation', [Validators.required]),
'LastName': new FormControl('Surname', [Validators.required])
});
}
onSaveUser() {
}//onSaveUser
onClose() {
//here we must close the accordian - open again will get details again from the server
this.boxIsClosed.emit(true);
}
}

<div class="container">
<div class="row">
<form [formGroup]="agencyAdminForm"
(ngSubmit)="onSaveUser()">
<div class="col-xs-8 col-sm-6 col-md-4">
<div class="form-group">
<label for="FirstName">First Name</label>
<span class="required-indicator">*</span>
<input type="text"
id="FirstName"
formControlName="FirstName"
class="form-control">
<span class="help-block"
*ngIf="!agencyAdminForm.get('FirstName').valid && agencyAdminForm.get('FirstName').touched">
<span *ngIf="agencyAdminForm.get('FirstName').hasError('required') && agencyAdminForm.get('FirstName').touched"
class="required-indicator">This field is required.</span>
<span *ngIf="agencyAdminForm.controls.FirstName.errors?.remote && agencyAdminForm.get('FirstName').touched"
class="required-indicator">First Name is invalid.</span>
</span>
</div>
<div class="form-group">
<label for="LastName">Last Name</label>
<span class="required-indicator">*</span>
<input type="text"
id="LastName"
formControlName="LastName"
class="form-control">
<span class="help-block"
*ngIf="!agencyAdminForm.get('LastName').valid && agencyAdminForm.get('LastName').touched">
<span *ngIf="agencyAdminForm.get('LastName').hasError('required') && agencyAdminForm.get('LastName').touched"
class="required-indicator">This field is required.</span>
<span *ngIf="agencyAdminForm.controls.LastName.errors?.remote && agencyAdminForm.get('LastName').touched"
class="required-indicator">Last Name is invalid.</span>
</span>
</div>
<div class="form-group" *ngIf="!isNewUser">
<button class="btn action-button" type="submit" [disabled]="!agencyAdminForm.valid">Save</button>
<button class="btn action-button" type="button" (click)="onClose()">Cancel</button>
</div>
</div>
</form>
</div>
</div>
&#13;