如何根据表单的状态有条件地格式化测试?

Question

我正在尝试让我的表单在表单无效时显示红色文本，在表单有效时显示绿色，具体取决于表单的状态和验证标准。如何通过角度 8 实现这一点？

(网页(

<p class="status">
Form Status: {{ Form.status }}
</p>

(TS(

Form = this.fb.group({
Id: [0],
name: ['', Validators.required],
app: ['', Validators.required],
domain: [''],
environment: ['']
})

Answer 1

创建无效类 CSS 并将 html 调整为：

<p class="status">
Form Status: 
<span [class.invalid-class]="Form.invalid">
{{ Form.status }}
</span>
</p>