Angular 响应式表单可以通过 Validators 提供的验证器对数据的合法性进行验证，例如验证表单输入是否为空或者是否为有效的邮箱地址等。这些验证是基于数据的内容和格式进行判断的，但并不涉及表单控件的样式变化。

以下是一个简单的示例，演示如何在提交表单数据之前进行数据验证：

在 component 类中需要导入 ReactiveFormsModule，以及 Validators：

import { Component } from '@angular/core'; import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({ selector: 'app-my-form', templateUrl: './my-form.component.html', styleUrls: ['./my-form.component.css'] }) export class MyFormComponent { // 创建一个响应式表单 form = new FormGroup({ name: new FormControl('', Validators.required), email: new FormControl('', [Validators.required, Validators.email]), age: new FormControl('', Validators.min(18)) });

// 提交表单数据的方法 onSubmit() { if (this.form.valid) { console.log('表单数据：', this.form.value); } else { console.log('表单数据不合法，请检查'); } } }

在模板文件中，需要添加表单元素和响应式表单的绑定：

在代码示例中，当用户点击提交按钮时，会触发 onSubmit() 方法，此时会判断响应式表单的有效性，如果数据合法，就打印表单数据；否则，提示表单数据不合法。

需要注意的是，这里的数据验证是针对数据本身的内容和格式进行判断，而不是对表单控件的样式变化进行判断。如果需要对控件的样式进行改变，可以使用 CSS 或者 Angular 的 ngClass 指令。