Question

我有一个表单，表单（提交）= addContact（）函数。此表单具有某些“必填”属性。但是当我单击添加按钮时，对于必填字段为空，它不会显示任何错误。

一种解决方法是我定义了一个[form（submit）= isEmpty（）]方法来手动检查这些字段，但是我不明白为什么第一种方法不起作用。

在解决方法之前，我使用了'required'以及'required =“ required”'和'required =“ true”'。没有一个。

问题：

<form (submit) = "addContact()" name="simpleForm">
    <div class="form-group">
      <label>First Name</label>
      <input type="text" [(ngModel)] = "first_name" name = "first_name" class ="form-control" required="required">
    </div>
    <input type="submit" class="btn btn btn-success" value = "Add"> 
  </form>

解决方法之后：

<form (submit) = "isEmpty()" name="simpleForm">
    <div class="form-group">
      <label>First Name</label>
      <input type="text" [(ngModel)] = "first_name" name = "first_name" class ="form-control" required="required">
    </div>
    <input type="submit" class="btn btn btn-success" value = "Add"> 
  </form>

isEmpty（）函数：

isEmpty(){
    if(this.first_name ==null || this.last_name ==null || this.contact_no==null){
      alert("Please Fill all fields");
      return false;
    }else this.addContact();
   }

表格中有3个字段，我只显示了1个以使其简短。它们全都是文本字段，没有具体说明。

如果我只在提交时使用addContact（），即使必填字段为空，它也会继续执行其逻辑。

如果我使用isEmpty（），它将手动对其进行检查，如果输入为空，则会发出警报。

Answer 1

由于该问题仅用javascript标记，因此请提供javascript解决方案。

尝试使用(submit) = "addContact()"删除action="javascript:addContact();"

<form action="javascript:addContact();" name="simpleForm">
    <div class="form-group">
        <label>First Name</label>
        <input type="text" [(ngModel)]="first_name" name="first_name" class="form-control" required="required">
    </div>
    <input type="submit" class="btn btn btn-success" value="Add">
</form>
<script>
    function addContact() {
        alert("ok");
    }
</script>

表单（提交）不检查“必填”字段

1 个答案: