Question

每次我提交表单时，即使输入文本字段为空，即使我放置了必需的标记，表单也会被提交。我的代码有问题吗？我不知道如何解决此问题或错误所在。另外，提交后如何清除输入字段。先感谢您。这是编译器的问题吗（我正在使用VS代码，并且正在google chrome上启动网站）

<div class="row">
    <div class="col-xs-12">
        <form>
            <div class="row">
                <div class="col-sm-5 form-group">
                    <label for="firstName">First Name</label>
                    <input 
                    type="text" 
                    id="firstName" 
                    class="form-control" 
                    #fnameinput
                    required />
                </div>
                <div class="col-sm-5 form-group">
                    <label for="lastName">Last Name</label>
                    <input 
                    type="text" 
                    id="lastName" 
                    class="form-control" 
                    #lnameinput
                    required />
                </div>
                <div class="col-sm-5 form-group">
                    <label for="phone">Phone Number</label>
                    <input 
                    type="text" 
                    id="lname" 
                    class="form-control" 
                    #phoneinput
                    required />

                </div>
                <div class="col-sm-2">
                    <button 
                    class="btn btn-success" 
                    type="submit" 
                    (click)="onAddContactItem()"
                    >Add New Contact</button>
                </div>
            </div>
        </form>

    </div>
</div>

form {
    /* Just to center the form on the page */
    margin: 0 auto;
    width: 400px;
    /* To see the outline of the form */
    padding: 1em;
    border: 3px solid #CCC;
    border-radius: 1em;
  }


  label {
    /* To make sure that all labels have the same size and are properly aligned */
    display: inline-block;
    width: 90px;
    text-align: center;
  }

  button {
    /* This extra margin represent roughly the same space as the space
       between the labels and their text fields */
     font-size: 16px;
     display:block;
     border: 0;           
     height: 34px;
     margin: 0;         
     float:left;
  }

  input:invalid {
    border: 2px dashed red;
  }

  input:valid {
    border: 2px solid black;
  }

Answer 1

novalidate在angular的更高版本中是默认设置。因此不会触发HTML5验证器。在表单中将ngNativeValidate用作属性（）

输入字段中的必需标记在Angular html文件中不起作用？

1 个答案: