Question

我正在努力进行角度4的验证。我有一个组件，它由父组件提供的输入填充。我已经对特定的文本框进行了验证，该文本框由输入对象填充（由父组件给出）。 Angular将输入视为错误下面是我的标记

<mat-form-field class="fill-control">
    <input matInput placeholder="link" value="{{feed.link}}" formControlName="link" required>
</mat-form-field>
<mat-error *ngIf="!moderateFeedForm.controls['link'].valid && moderateFeedForm.controls['link'].touched">
    Please enter a valid url
</mat-error>

在我的组件的构造函数中，我有以下代码

this.moderateFeedForm = this.fb.group({
      'link':['',Validators.compose([Validators.required])]],
})

在我的表格中，我有很多其他领域，所有人的行为都是一样的，我刚刚在这里放了一个。没有编译错误，但是当我对文本框进行聚焦和取消聚焦时，我得到以下错误

“错误：ExpressionChangedAfterItHasBeenCheckedError：Expression有检查后改变了。上一个值：'null'。当前值： '垫错误-0'“

对我来说，好像在填充值之前应用了验证，或者某些验证器不知道这些值。当我只是编辑值并再次使用相同的值时，验证将被传递。

这里发生了什么错误？

Answer 1

在模板中，您应该从输入标记中删除所需的指令。

Answer 2

尝试将您的0替换为``* ngIf =＆＃34;无效（＆＃39;链接＆＃39;）＆＃34;`。

然后在component.ts文件中添加一个方法：

*ngIf="!moderateFeedForm.controls['link'].valid && moderateFeedForm.controls['link'].touched"

您还可以从代码中删除invalid(control) { return !moderateFeedForm.controls[control].valid && moderateFeedForm.controls[control].touched; }子句，然后只需Validators.compose

Answer 3

最后我想通了。我给出了错误的初始值。在我的组件中，我必须将其初始化为

this.form= this.fb.group({[initialval], [validations...]})

具有默认值的Angular 4验证

3 个答案: