我正在使用一个包含搜索框和两个下拉列表的对话框。我有一个＆＃34;取消＆＃34;和＆＃34;确认＆＃34; md-button个按钮。我想点击确认验证对话框。对话框HTML具有md-dialog-content标记。整个HTML都在那个标签内。
对话框HTML
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div md-dialog-content>
<h4>Find your IFSC Code</h4>
<div class="form-group">
<input type="text" id="keyword" class="form-control"
name="bankname" [(ngModel)]="query" (keyup)="filter()"
(change)="bankChanged($event)" placeholder="BANK" />
</div>
<div class="filter-select" *ngIf="filteredList.length > 0">
<ul *ngFor="let item of filteredList" class="filter-select-list">
<li class="artist-name">
<a (click)="select(item)">{{item}}</a>
</li>
</ul>
</div>
<div class="form-group">
<label for="sel2"></label>
<select class="form-control selectpicker" id="sel2" name ="city"
[(ngModel)]="city" (change)="cityChanged($event)">
<option hidden="true" value="">Select City</option>
<option *ngFor="let city of cities">{{city}}</option>
</select>
<label for="sel3"></label>
<select class="form-control selectpicker" id="sel3"
name ="branch" [(ngModel)]="branch"
(change)="branchChanged($event.target.selectedIndex -1)">
<option data-hidden="true" value="">Select Branch</option>
<option *ngFor="let branch of branches | keys">{{branch}}</option>
</select>
</div>
<div md-dialog-actions>
<button md-button (click)="onNoClick()" tabindex="-1">
Cancel
</button>
<button md-button [md-dialog-close] ="this.modaldetails" tabindex="2">
Confirm
</button>
</div>
</div>
</div>
</div>
</div>
ts文件
import { Component, OnInit, Inject, Input, Output, EventEmitter, ElementRef, ViewChild } from '@angular/core';
import { MdDialog, MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
import { Select2OptionData } from 'ng2-select2';
import { PaymentService } from '../../sharedService/payment.service';
import { IFSCService } from './ifscModal.service';
import { FormControl, NgForm } from '@angular/forms';
// import { SearchService } from '../../sharedService/search.service';
import { KeysPipe } from '../../second/keys.pipe';
//import { ModalService } from './modal/modal.service';
@Component({
selector: 'app-modal',
host: {
'(document:click)': 'handleClick($event)',
},
templateUrl: './ifscModal.component.html',
styleUrls: ['./ifscModal.component.css'],
})
export class IFSCModalComponent {
public query = '';
public filteredList = [];
public elementRef;
value;
str1;
str2;
banksArr;
dataArr;
bank;
city = [];
cities = [];
banks = [];
branch = [];
branches = [];
fields : boolean;
ifsc: String;
ifsccode: String;
getIFSCCode = {};
// modaldetails: {};
errBlock : boolean;
errMsg : string;
constructor(
public dialogRef: MdDialogRef<IFSCModalComponent>,
@Inject(MD_DIALOG_DATA) public data: any, public paymentservice: PaymentService,
public ifscModalservice: IFSCService, myElement: ElementRef) {
this.elementRef = myElement;
}
ngOnInit() {
this.ifscModalservice.getBankList().subscribe(
(banks_res) => {
this.banks = banks_res["bankList"];
},
(error) => console.log("error : " + error),
() => console.log('Complete getting Bank List')
);
console.log(this.banks);
this.fields = false;
this. errBlock = false;
}
filter() {
console.log("query:" + this.query);
if (this.query !== "") {
this.filteredList = this.banks.filter(function (el) {
return el.toLowerCase().indexOf(this.query.toLowerCase()) > -1;
}.bind(this));
if (this.filteredList.length == 0) {
this.filteredList = ["No Results Found!!"];
}
}
else {
this.filteredList = this.banks;
}
}
select(item) {
this.query = item.toString();
// console.log(this.modaldetails);
this.filteredList = [];
}
handleClick(event) {
var clickedComponent = event.target;
var inside = false;
do {
if (clickedComponent === this.elementRef.nativeElement) {
inside = true;
}
clickedComponent = clickedComponent.parentNode;
} while (clickedComponent);
if (!inside) {
this.filteredList = [];
}
}
bankChanged(val: any) {
let obj = this.banks;
console.log(obj, val);
if (obj.length !== 0) {
this.ifscModalservice.getCityList().subscribe(
(cities_res) => {
this.cities = cities_res["cityList"];
},
(error) => console.log("error : " + error),
() => console.log('Complete getting city List')
);
}
}
cityChanged(val: any) {
let obj = this.city;
console.log(obj, val);
this.ifscModalservice.getBranchList().subscribe(
(branches_res) => {
this.branches = branches_res["branchList"];
//this.ifsc = this.branches;
},
(error) => console.log("error : " + error),
() => console.log('Complete getting branch List')
);
}
branchChanged(val: any) {
let obj = this.branch;
console.log(obj, val);
//getIFSC() {
for (let i = 0; i < Object.keys(this.branches).length; i++) {
let j = val
this.ifsccode = this.branches[Object.keys(this.branches)[j]];
}
console.log(this.ifsccode);
//}
// this.modaldetails = {
// "bank": this.query,
// "ifscCode": this.ifsccode
// }
this.Confirm();
console.log("bank "+this.query.length);
console.log("city "+this.city.length);
console.log("branch "+this.branch.length);
console.log("ifsc "+this.ifsccode.length);
}
Confirm () {
if(this.query.length>0 && this.city.length>0 && this.branch.length>0)
{
this.ifscModalservice.saveDetails(this.query, this.city, this.branch, this.ifsccode);
this.errBlock = false;
} else {
this.errBlock = true;
this.errMsg = "Fill out all the fields to confirm."
console.log("button called");
}
}
onNoClick() {
//console.log(this.modaldetails);
this.dialogRef.close();
return this.ifscModalservice.returnDetails();
// return this.modaldetails;
}
}
https://stackblitz.com/edit/angular-qyrmve?file=app%2Fapp.module.ts
答案 0 :(得分：0)
您可以在confirm按钮上设置点击事件，然后可以编写一个功能来验证并根据您的情况返回true或false。
你的HTML按钮
<button md-button (click)="validate()" [md-dialog-close] ="modaldetails" tabindex="2">Confirm </button>
在您的组件中，您需要添加验证功能以进行验证。
validate() {
// all your validation should goes here
this.
}
这是手动验证的最简单方法。如果您愿意，也可以使用ReactiveForm等