我的表單 HTML 中的必填字段不起作用

Question

我在 HTML 中創建了一個帶有必填字段，然后是一個帶有 ng-click=add() 的提交按鈕。

代碼如下：

輸入名字：

 <div class="mb-3"> <label class="form-label">Enter surname:</label> <input type="text" class="form-control" placeholder="Person surname" ng-model= "newPerson.surname" required> </div> <div class="mb-3"> <label class="form-label">Enter age:</label> <input type="text" class="form-control" placeholder="Person age" ng-model= "newPerson.age" required> </div> <div class="mb-3"> <label class="form-label">Enter occupation:</label> <input type="text" class="form-control" placeholder="Person occupation" ng-model= "newPerson.occupation" required> </div> <button type="submit" class="btn btn-primary" ng-click="add()">Add</button> </form>

按下按鈕時，它會添加該人，然后它告訴我這些字段是必需的，但在我的列表中，該人已經存在將未定義的值。

我也在文件的頂部聲明了。

謝謝

Answer 1

您也可以使用驗證方法來驗證提交時的輸入，而不是必需的。 例子

 public validateForm() { if(newPerson.surname === null || newPerson.surname === undefined || newPerson.surname === " ") { error.surname = "Surname is required"; } if(newPerson.age === null || newPerson.age === undefined || newPerson.age === " ") { error.age = "Age is required"; } if(newPerson.occupation === null || newPerson.occupation === undefined || newPerson.occupation === " ") { error.occupation = "Occupation is required"; } if(newPerson.surname !== null || newPerson.surname !== undefined || newPerson.surname !== " " || newPerson.age !== null || newPerson.age !== undefined || newPerson.age !== " " || newPerson.occupation !== null || newPerson.occupation !== undefined || newPerson.occupation !== " ) { this.add(); } }

 <div class="mb-3"> <label class="form-label">Enter surname:</label> <input type="text" class="form-control" placeholder="Person surname" ng-model= "newPerson.surname" required> </div> <span *ngIf="error.surname"> {{error.surname}}</span> <div class="mb-3"> <label class="form-label">Enter age:</label> <input type="text" class="form-control" placeholder="Person age" ng-model= "newPerson.age" required> </div> <span *ngIf="error.age"> {{error.age}}</span> <div class="mb-3"> <label class="form-label">Enter occupation:</label> <input type="text" class="form-control" placeholder="Person occupation" ng-model= "newPerson.occupation" required> </div> <span *ngIf="error.occupation"> {{error.occupation}}</span> <button type="submit" class="btn btn-primary" ng-click="validateForm()">Add</button> </form>