如何在Angular组件中向HTML表单添加验证

问题描述 投票:0回答:1

我想在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");
  }
........
angular typescript validation
1个回答
0
投票

您是否使用了reactForm验证..?通过使用activeform,您可以按照当前要求进行验证。!

© www.soinside.com 2019 - 2024. All rights reserved.