因为我是角度2技能的新手。我正面临着如何在单个表单中为三个不同的表创建验证的问题
场景：我使用angular2 Form模块创建了一个表单，我在其中创建了3个单独的表和一些输入数据。如果用户输入任何一个表中的数据，则不允许用户在其他两个表中输入数据。单击提交按钮，用户应显示一些错误消息
有人能建议我一些解决方案我怎么能用角度2
来做到这一点请参阅以下代码段以获取参考资料
<div class="container-fluid" style="width: 96%;" *ngIf="!submitted">
<div class="row">
<div class="col-md-12">
<form class="form-horizontal" #searchForm="ngForm" (ngSubmit)="onSubmit(searchForm.value)" style="position: relative;">
<div class="table-responsive">
<table class="table table-bordered" style="max-width: 94%;margin: 0px auto;font-size: 13px;">
<thead id="partsThead">
<th>Parts Prefix</th>
<th>Parts Number</th>
<th>Parts Desc</th>
<th>Add Desc</th>
<th>Status</th>
<th>Class</th>
<th>F-grp Part</th>
<th>Approved Date</th>
</thead>
<tbody>
<tr>
<td><input type="number" class="form-control input-sm" name="partprefix" id="partprefix" [(ngModel)]="partprefix" /></td>
<td><input type="number" class="form-control input-sm" name="partno" id="partno" [(ngModel)]="partno" /></td>
<td><input type="text" class="form-control input-sm" name="partDesc" id="partDesc" [(ngModel)]="partDesc" /></td>
<td><input type="text" class="form-control input-sm" name="addDesc" id="addDesc" [(ngModel)]="addDesc" /></td>
<td>
<input list="status" name="status" class="form-control input-sm" id="status1" [(ngModel)]="status" >
<datalist id="status">
<option value="Approved">
<option value="Rejected">
<option value="None">
<option value="Active">
<option value="Inactive">
</datalist>
<!--<input type="text" class="form-control input-sm" id="status" ngModel #status="ngModel" required autocomplete="on"/>-->
<!-- <select class="form-control input-sm" name="status" ngModel #status="ngModel" required>
<option *ngFor="let p of status" [value]="p">{{ p }}</option>
</select>-->
<!--<select id="status" style="font-size: 12px;">
<option>Active</option>
<option>Inactive</option>
</select>-->
</td>
<td>
<input list="class" name="class" class="form-control input-sm" id="clas" [(ngModel)]="clas" >
<datalist id="class">
<option value="Class1">
<option value="Class2">
<option value="Class3">
<option value="Class4">
<option value="Class5">
</datalist>
<!--<input type="text" class="form-control input-sm" id="clas" />-->
<!-- <select class="form-control input-sm" name="clas" ngModel #clas="ngModel" required>
<option *ngFor="let p of powers" [value]="p">{{ p }}</option>
</select>-->
<!-- <select id="clas" style="font-size: 12px;">
<option>Active</option>
<option>Inactive</option>
</select>-->
</td>
<td height="20%"><input type="text" class="form-control input-sm" name="fgrpPart" id="fgrpPart" [(ngModel)]="fgrpPart" /></td>
<td style="border: none;width: 11%">
<span style="position: relative;bottom: 4px;left: -2px;">From : <input type="date" id="datepickerFrom" name="datepickerFrom" style="height: 21px;width: 71%;position: relative;" [(ngModel)]="datepickerFrom" ></span>
<span style="display: inline-block;">To : <input type="date" id="datepickerTo" name="datepickerTo" style="height: 21px;width: 74%;position: relative;float: right;right: 3px" [(ngModel)]="datepickerTo" ></span>
</td>
</tr>
</tbody>
</table>
</div>
<!--PC Model-->
<div class="row">
<div class="col-md-6" style="margin: 10px 0px 0px 0px;">
<div class="table-responsive">
<table class="table table-bordered" style="max-width: 94%;margin: 0px auto;font-size: 13px;left: 19px;position: relative;">
<thead style="background: #337ab7;color: white;">
<th style="text-align: center;width: 10%">PC</th>
<th style="text-align: center;width: 10%;">Model</th>
<th style="text-align: center;width: 10%;">Variant</th>
</thead>
<tbody>
<tr>
<td>
<input list="pc" name="pc" class="form-control input-sm" id="pc1" [(ngModel)]="pc" >
<datalist id="pc">
<option value="PC1">
<option value="PC2">
<option value="PC3">
<option value="PC4">
<option value="PC5">
</datalist>
<!--<input type="text" class="form-control input-sm" name="pc" id="pc" ngModel #pc="ngModel" required />-->
<!--<select style="height: 22px;width: 80%;left: 14px;position: relative;font-size: 12px;">
<option>Active</option>
<option>Inactive</option>
</select>--></td>
<td>
<input list="model" name="model" class="form-control input-sm" id="model1" [(ngModel)]="model" >
<datalist id="model">
<option value="Model1">
<option value="Model2">
<option value="Model3">
<option value="Model4">
<option value="Model5">
</datalist>
<!--<input type="text" class="form-control input-sm" name="model" id="model" ngModel #model="ngModel" required />-->
<!--<select style="height: 22px;width: 80%;left: 14px;position: relative;font-size: 12px;">
<option>Active</option>
<option>Inactive</option>
</select>-->
</td>
<td><input type="text" id="variant" placeholder="Variants" name="variant" readonly style="background: white;min-height: 22px;position: relative;" [(ngModel)]="variant" /><button type="button" style="background:#f08080;color: white;position: relative;float: right;border-radius: 4px;bottom: 3px;">Variant</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-6" style="margin: 10px 0px 0px 0px;">
<div class="table-responsive">
<table class="table table-bordered" style="max-width: 94%;margin: 0px auto;font-size: 13px;position: relative;right: 17px;">
<thead style="background: #337ab7;color: white;">
<th style="text-align: center;width: 10%;">Fg-grp Service</th>
<th style="text-align: center;width: 10%;">OP ID</th>
<th style="text-align: center;width: 10%;">OP NO</th>
<th style="text-align: center;width: 10%;">Usage</th>
<th style="text-align: center;width: 10%;">New VSS</th>
</thead>
<tbody>
<tr>
<td><input type="text" class="form-control input-sm" name="fgrpService" id="fgrpService" [(ngModel)]="fgrpService" ></td>
<td><input type="text" class="form-control input-sm" name="opID" id="opID" style="min-height: 22px;width: 80%;left: 14px;position: relative;" [(ngModel)]="opID" /></td>
<td><input type="text" class="form-control input-sm" name="opNO" id="opNO" style="min-height: 22px;width: 80%;left: 14px;position: relative;" [(ngModel)]="opNO" /></td>
<td><input type="text" class="form-control input-sm" name="usage" id="usage" style="min-height: 22px;width: 80%;left: 14px;position: relative;" [(ngModel)]="usage" /></td>
<td>
<input list="newVss" name="newVss" class="form-control input-sm" id="newVss1" [(ngModel)]="newVss" >
<datalist id="newVss">
<option value="Newvss1">
<option value="Newvss2">
<option value="Newvss3">
<option value="Newvss4">
<option value="Newvss5">
</datalist>
<!--<input type="text" class="form-control input-sm" name="newVss" id="newVss" ngModel #newVss="ngModel" required>-->
<!--<select style="height: 22px;width: 80%;left: 14px;position: relative;font-size: 12px;">
<option>Active</option>
<option>Inactive</option>
</select>--></td>
<!-- <td style="border: none;float: right;position: relative;left: 142px;background: none"><button type="button" class="btn btn-primary btn-lg">Search</button></td> -->
<!-- <td style="border: none;"> <button type="button" class="btn btn-primary btn-lg" style="position: relative;margin: 0px 10px 10px 45px;width: 100px;height: 35px;background:#49afcd">Search</button></td> -->
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="form-group col-xs-2 col-md-2" style="max-width: 155px;top: 10px;left: 40px;">
<!--<input type="submit" value='Search' class="form-control input-sm" id="serchBtn" placeholder="Usage" />-->
<button type="submit" id="serchBtn" class="btn btn-default">Search</button>
</div>
</form>
</div>
</div>
import { Component, OnInit, Host } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'searchform',
templateUrl: 'search.component.html'
})
export class SearchComponent implements OnInit {
form: any;
/*status: string[];*/
submitted: boolean = false;
constructor() {
}
ngOnInit() {
/* this.status = ['Really Smart', 'Turbulent Breeze',
'Super Hot', 'Weather Changer'];*/
}
onSubmit(form: any) {
this.submitted = true;
this.form = form;
console.log(form);
}
}