在Angular中使用HTML5模式

Question

我的组件HTML文件中有一个date元素：

<input type="text" name="travelDate" 
    placeholder="Date YYYY-MM-DD" name="travelDate" class="form-control" 
    pattern="\d{4}/\d{1,2}/\d{1,2}" formControlName="travelDate">

<button class="btn btn-info" type="submit">Search</button>

这只是一个文本字段，允许用户输入日期值，现在我想限制日期格式为YYYY-MM-DD，所以我使用的是上面的模式。

现在，当我输入一些随机文本abc然后单击“提交”按钮时，我没有收到任何警告消息，提示travelDate字段无效。

如何在Angular组件HTML文件中使用模式？

Answer 1

像这样在Formcontrol中使用Validator.pattern：

     myForm: FormGroup;

    this.myForm = this.fb.group({
      'travelDate': ['', Validators.pattern(/\d{4}/\d{1,2}/\d{1,2}/)]
    }) 

提交后获得提醒：

submit(){

    if(this.myForm.get('travelDate').invalid){
       alert('invalid date')
    }

}