我想在component.html文件的html表单中添加所需的minlength,maxlength,typenumber,验证。但是,当我使用默认浏览器的“ required”属性时,它不起作用,并且表单提交动作正在触发。附注:我想使用JS验证而不是默认的浏览器验证。
COMPONENT.HTML
<form (ngSubmit)="onSubmit()">
<div class="row">
<div class="col-8">
<input id="batchno" type="text" placeholder="Batch No." value="" required />
</div>
<div class="col-4">
<button (click)="curScan('batch','direct')" class="scan-btn">SCAN <i class="fa fa-camera"></i></button>
</div>
</div>
<div class="row">
<div class="col-8">
<input id="reelno" type="text" placeholder="IFRA/TAPI Reel No.">
</div>
<div class="col-4">
<button (click)="curScan('reel','direct')" class="scan-btn">SCAN <i class="fa fa-camera"></i></button>
</div>
</div>
<div class="row">
<div class="col-12">
<label class="checklabel">Direct Issue to Production
<input type="checkbox">
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="row">
<div class="col-12">
<select>
<option>Storage Location</option>
</select>
</div>
</div>
<div class="row">
<div class="col-12">
<select>
<option>Select GSM</option>
</select>
</div>
</div>
<div class="row">
<div class="col-12">
<input type="text" placeholder="Enter Container No.">
</div>
</div>
<div class="row">
<div class="col-12">
<input type="text" placeholder="Enter LR No.">
</div>
</div>
<div class="row">
<div class="col-12">
<input type="text" onmouseenter="(this.type='date')" placeholder="Select LR Date">
</div>
</div>
<div class="row">
<div class="col-12">
<input type="text" placeholder="Enter Transporter Name">
</div>
</div>
<div class="row">
<div class="col-12">
<input type="text" placeholder="Enter Truck No.">
</div>
</div>
<div class="row">
<div class="col-12">
<input type="text" placeholder="Enter Delivery Note">
</div>
</div>
<div class="row">
<div class="col-12">
<input type="text" placeholder="Enter Total Number of Reels">
</div>
</div>
<div class="row">
<div class="col-12">
<input type="text" placeholder="Enter Total Weight of Reels">
</div>
</div>
<div class="row">
<div class="col-12">
<input type="text" placeholder="Select PO + Item No.">
</div>
</div>
<div class="row">
<div class="col-12">
<input type="number" placeholder="Enter Quantity">
</div>
</div>
<div class="row">
<div class="col-12">
<select>
<option>Select Damage Type</option>
</select>
</div>
</div>
<div class="row">
<div class="col-12">
<select>
<option>Select Depth of Cut</option>
</select>
</div>
</div>
<div class="row">
<div class="col-12">
<input type="submit" value="Submit">
</div>
</div>
</form>
COMPONENT.TS
........
onSubmit(){
alert("Test");
}
........
您是否使用了reactForm验证..?通过使用activeform,您可以按照当前要求进行验证。!