typescript 来自组件的 Angular 4 模式验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47138605/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 4 pattern validation from component
提问by IntoTheDeep
I am not able to bind variable from component as a pattern with Angular 4. This code works:
我无法将组件中的变量作为模式与 Angular 4 绑定。此代码有效：
<textarea #sss="ngModel"
class="form-control"
id="sss"
maxlength="350"
pattern="[a-zA-Z '-,;.]*"
[(ngModel)]="formModel.sss" name="sss"></textarea>
But when I try to add something like:
但是当我尝试添加以下内容时：
export class SssComponent {
public sssPattern: string = "[a-zA-Z '-,;.]*";
and add it like that:
并像这样添加它：
<textarea #sss="ngModel"
class="form-control"
id="sss"
maxlength="350"
pattern="sssPattern"
[(ngModel)]="formModel.sss" name="sss"></textarea>
it don't. Also tried variations like:
它没有。还尝试了以下变体：
[pattern]="sssPattern"
[pattern]={{sssPattern}}
pattern={{sssPattern}}
with no success. Angular 4
没有成功。角 4
采纳答案by Poul Kruijt
You have to use attr.pattern, because pattern is an attribute with no reflection from a property:
您必须使用attr.pattern，因为模式是一个没有来自属性的反射的属性：
<textarea [attr.pattern]="sssPattern"></textarea>
Interpolation and property binding can set only properties, not attributes.
You need attribute bindings to create and bind to such attributes.
Attribute binding syntax resembles property binding. Instead of an element property between brackets, start with the prefix
attr, followed by a dot (.) and the name of the attribute. You then set the attribute value, using an expression that resolves to a string.
<textarea [attr.pattern]="sssPattern"></textarea>
插值和属性绑定只能设置属性，不能设置属性。
您需要属性绑定来创建和绑定到这些属性。
属性绑定语法类似于属性绑定。不是括号之间的元素属性，而是以前缀开头
attr，后跟点 (.) 和属性名称。然后使用解析为字符串的表达式设置属性值。
You cannot use patternon a textarea. Angular does have its own PatternValidator, which means all that nonsense I said about attrdoes not hold up for this specific case, but I believe this does not work on a textarea, because textareaitself does not contain the patternattribute in standard HTML5, as opposed to the inputelement.
您不能pattern在textarea. Angular 确实有自己的PatternValidator，这意味着我所说的所有废话attr都不适用于这种特定情况，但我相信这不适用于 textarea，因为textarea它本身不包含pattern标准中的属性HTML5，而不是input元素。
In order to use a pattern on a textarea, you should create a CustomValidator
为了在 a 上使用模式textarea，您应该创建一个CustomValidator
回答by Prithivi Raj
If you use Angular Forms, below code can be used for field and pattern validation
如果您使用 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)]));
