代码之家 › 专栏 › 技术社区 › learner

使用带角度的HTML5模式

angular html

0

learner · 技术社区 · 6 年前

我的组件html文件中有一个日期元素:

<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 然后单击Submit按钮我没有收到任何警告消息 travelDate 字段无效。

如何在角度组件html文件中使用模式?

1 回复 | 直到 6 年前

1

Ghoul Ahmed 6 年前

在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')
    }

}