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

Question

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

<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 作为属性 ()