来自组件的角度4模式验证

Question

我无法将组件中的变量绑定为具有角度4的模式。此代码的工作原理：

<textarea #sss="ngModel"
    class="form-control"
    id="sss"
    maxlength="350"
    pattern="[a-zA-Z '-,;.]*"
    [(ngModel)]="formModel.sss" name="sss"></textarea>

但是当我尝试添加类似的内容时：

export class SssComponent {
    public sssPattern: string = "[a-zA-Z '-,;.]*";

并像这样添加：

<textarea #sss="ngModel"
    class="form-control"
    id="sss"
    maxlength="350"
    pattern="sssPattern"
    [(ngModel)]="formModel.sss" name="sss"></textarea>

它没有。还尝试了以下变体：

[pattern]="sssPattern"
[pattern]={{sssPattern}}
pattern={{sssPattern}}

没有成功。角度4

Answer 1

如果使用 Angular Forms，则以下代码可用于字段和模式验证

let emailFormat = "[A-Za-z0-9._%-]+@[A-Za-z0-9._%-]+\\.[a-z]{2,3}";
let nameFormat = "[a-zA-Z\s]+$";

this.name = new FormControl("", Validators.compose([Validators.required, Validators.pattern(nameFormat)]));
this.email = new FormControl("", Validators.compose([Validators.required, Validators.pattern(emailFormat)]));

Answer 2

<罢工> 你得用 attr.pattern，因为模式是一个属性，没有来自属性的反射：

<textarea [attr.pattern]="sssPattern"></textarea>

插值和属性绑定只能设置属性，不能设置属性。

您需要属性绑定来创建和绑定到这些属性。

属性绑定语法类似于属性绑定。不要括号之间的元素属性，而是以前缀attr开头，后跟点（.）和属性名称。然后使用解析为字符串的表达式设置属性值。

<罢工> 阅读更多

您不能在文本区域上使用pattern。Angular确实有自己的PatternValidator，这意味着我所说的所有关于属性的胡言乱语都不能适用于这种特定情况，但我相信这在文本区域上是行不通的，因为 本身在标准的HTML5中不包含 属性，而不是 /code>元素。

为了在< code>textarea上使用模式，您应该创建一个< code>CustomValidator