Question

编码是

<input type="tel" required #phone=ngModel pattern='^\d{10}$' [ngClass]="{'is-invalid': !phone.valid}" name="phone" class="form-control" [(ngModel)]="userModel.phone">
  <small [class.d-none]=”phone.valid || phone.untouched”>Phone number is required and must be ten digits</small>

输出控制台提供

compiler.js:2427 Uncaught Error: Template parse errors:
Parser Error: Unexpected token Lexer Error: Unexpected character [”] at column 1 in expression [”phone.valid] at column 2 in [”phone.valid] in ng:///AppModule/AppComponent.html@58:9 ("-invalid': !phone.valid}" name="phone" class="form-control" [(ngModel)]="userModel.phone">
  <small [ERROR ->][class.d-none]=”phone.valid || phone.untouched”>Phone number is required and must be ten digits</smal"):

我使用双引号作为”，而不是双引号，它给出错误消息为

未捕获的错误：模板解析错误：意外的结束标签“小”。当标签已经被另一个标签关闭时，可能会发生这种情况。有关更多信息，请参见https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags（“ ll [class.d-none] =''phone.valid || phone.untouched”>电话号码为必填项，且必须为十位数字[ERROR->]

Answer 1

您使用了错误的引号：

[class.d-none]=”phone.valid || phone.untouched”

应改为：

[class.d-none]="phone.valid || phone.untouched"

Answer 2

替换

<small [class.d-none]=”phone.valid || phone.untouched”>Phone number is required and must be ten digits</small>

使用：

<small [class.d-none]="phone.valid || phone.untouched">Phone number is required and must be ten digits</small>

小标签不适用于输入标签

2 个答案: