angular的formGroup的校验触发
<p>angular material 中form表单提交时赋值，无法触发input输入框的样式，使用给FormGroup赋值的方式</p><div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">onSubmit() {
Object.values(</span><span style="color: rgba(0, 0, 255, 1)">this</span>.formGroup.controls).forEach(i=><span style="color: rgba(0, 0, 0, 1)">{
i.marksAsDirty();
})
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.formGroup.patchValue(<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.formGroup.getRowValue())
</span><span style="color: rgba(0, 0, 255, 1)">if</span>(<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.formGroup.invalid){
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)">;
}
}</span></pre>
</div>
<div class="cnblogs_code">
<pre>// 需要在app.module.ts 中添加<br>import { errorStateMatcher, showOnDirtyErrorStateMatcher } from '@angular/material'<span style="color: rgba(0, 0, 0, 1)">
providers: [
{ provide: errorStateMatcher, useClass: showOnDirtyErrorStateMatcher }
],</span></pre>
</div>
<p>-------------------------------------------------------------------------------------------------------</p>
<p>对于单个的formControl的操作赋值触发校验的情况下，可以使用如下方式：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">this.formControl.setValue(''); // 只有此行可以触发FormControl的invalid是true，但是结合material 的mat-form-field无法触发<mat-error>的错误显示
this.formControl.markAsDirty();
this.formControl.updateValueAndValidity();<br>// 这两行等价于上面formGroup的赋值校验</pre>
</div>
<p> </p><br><br>
来源：https://www.cnblogs.com/lskzj/p/11444937.html
頁:
[1]