Angular 2-绑定到minlength属性oif HTML标记

Question

我在考虑为Forms编写一些可重用的组件。标签/输入，如firstName，lastName，email。 我遇到了与minlength绑定的问题。 这是代码的一部分：

<input 
        ngControl="name"
        #name="ngForm"
        type="text" 
        class="form-control" 
        id="name"
        required
        minlength="{{min}}">

我收到以下错误消息：

EXCEPTION: Template parse errors:
Can't bind to 'minlength' since it isn't a known native property ("
        id="name"
        required
        [ERROR ->]minlength="{{min}}">

任何想法??

Answer 1

您可以将pattern属性与RegExp一起使用。

• 在控制器中声明正则表达式并从视图中引用它

regExp = ".{5,}"; e.g. --> 5 characters minimum

<input 
    ngControl="name"
    #name="ngForm"
    type="text" 
    class="form-control" 
    id="name"
    required
    pattern="{{ regExp }}">

• 或直接在视图中使用它： pattern=".{5,}"

https://plnkr.co/edit/x5hwYzeMCkycdJs9YfW7?p=preview

Answer 2

我们使用方括号和模板表达式指定对DOM属性的单向绑定。

请将更改改为minlength="{{min}}"至[minlength]="min"

此图解释了某种程度上的Angular2属性绑定

Answer 3

它应该是[attr.minlength]="min"，因为这是元素属性，而不是本机属性