在这篇博客文章中，我们将学习使用角度反应形式值变化检测，并在最好和最完整的角度组件库–Ignite UI的帮助下启用条件验证。
让我们说你有一个使用FormBuilder类创建的反应表单，如下所示:
ngOnInit() {这个 .loginForm = 这个。fb.group({电子邮件: [null ，验证程序。必需]，密码: [null ，[Validators.required，Validators.maxLength(8)]]，phonenumber: [null]});}
您已经创建了loginForm，它有三个控件: 电子邮件、密码和电话号码。在这里，您正在使用FormBuilder创建反应式表单。在组件模板上，您可以附加loginForm，如下面的代码清单所示。使用属性绑定，将HTML form元素的formGroup属性设置为loginForm，并将这些控件的formControlName值设置为FormBuilder的各个FormControl属性。
< 表单 (ngSubmit) = 'loginUser()' [formGroup] = 'loginForm' novalidate class = "form"< input formControlName = 'email' type = "text" class = "form-control" placeholder = "Enter Email" /><div类="警报警告-危险"* ngIf="loginForm.get('email').hasError('required') & & loginForm.get('email').touched">电子邮件是必需的</div>< input formControlName = 'password' type = "password" class = "form-control" placeholder = "输入密码"< input formControlName = 'phonenumber' type = "text" class = "form-control" placeholder = "输入电话号码"<div类="警报警告-危险"* ngIf="loginForm.get('phonenumber').hasError('required') & & loginForm.get('phonenumber').已触摸">电话号码是必需的</div>< br /><按钮[已禁用]='loginForm.invalid'类="btn btn-默认">登录</按钮></ form >
我们还为电子邮件和电话号码字段放置了错误消息。此外，提交按钮只会在表单有效时启用。表单提交处理如下所示:
loginUser() {console.log( 此 .loginForm.status)；console.log( 此 .loginForm.value)；}
如果表单在浏览器控制台中有效，您将获得如下输出:
此外，如果有错误，提交按钮将被禁用，错误消息将显示如下:
现在假设一个场景，你有一个单选按钮来发送通知。用户应该能够选择发送通知选项，并在此基础上，某些FormControl将有一些验证。
考虑下面的表格，
我们添加了一个发送通知选项。如果用户选择电话发送通知然后电话号码字段应该是必需的，否则，它不应该。为了实现这一点，我们需要执行以下任务，
- 倾听变化
- Put条件验证
首先，让我们修改我们的表单来处理通知。所以现在form有一个通知FormControl，默认值设置为null，如下面的清单所示:
这个。loginForm = 这个。fb.group({电子邮件: [null ，验证程序。必需]，密码: [null ，[Validators.required，Validators.maxLength(8)]]，电话号码: [null ]，通知: [电子邮件]});
在反应式表单模板上，我们将添加单选按钮组来处理发送通知选项。
< 表单 (ngSubmit) = 'loginUser()' [formGroup] = 'loginForm' novalidate class = "form"< input formControlName = 'email' type = "text" class = "form-control" placeholder = "Enter Email" /><div类="警报警告-危险"* ngIf="loginForm.get('email').hasError('required') & & loginForm.get('email').touched">电子邮件是必需的</div>< input formControlName = 'password' type = "password" class = "form-control" placeholder = "输入密码"< input formControlName = 'phonenumber' type = "text" class = "form-control" placeholder = "输入电话号码"<div类="警报警告-危险"* ngIf="loginForm.get('phonenumber').hasError('required') & & loginForm.get('phonenumber').已触摸">电话号码是必需的</div>< br />< label class = 'control-label' > 发送通知 </ label >< br />< label class = "radio-inline" >< 输入类型 = “收音机” 值 = “电子邮件” formControlName = “通知” 电子邮件 ></ 标签 >< label class = "radio-inline" >< 输入类型 = “无线电” 值 = “电话” formControlName = “通知” 电话 ></ 标签 > < br /><按钮[已禁用]='loginForm.invalid'类="btn btn-默认">登录</按钮></ form >
在这一点上的形式，如下所示:
Subscribe to valueChanges
在反应式窗体中，FormControls和FormGroups都有一个valueChanges方法。它返回一个可观察的类型，因此您可以订阅它，以处理FormControls或FormGroups的实时值更改。
在我们的示例中，我们需要订阅通知FormControl的valueChanges。这可以做如下:
formControlValueChanged() {这个 .loginForm.get( 'notification' ).valueChanges.subscribe ((模式: 字符串) => {console.log (模式)；});}
我们需要将其称为OnInit生命周期钩子a，如下所示:
ngOnInit() {这个 .loginForm = 这个。fb.group({电子邮件: [null ，验证程序。必需]，密码: [null ，[Validators.required，Validators.maxLength(8)]]，电话号码: [null ]，通知: [电子邮件]});这个 .formControlValueChanged();}
现在，当您在浏览器控制台中更改表单上的通知选择时，您可以看到，您拥有最新的值。
请记住，我们没有在单选按钮上处理任何事件以获取最新值。Angular有一个valueChanges方法，它在FormControl和FormGroup上返回最近的值作为可观察的值，我们在通知FormControl上订阅了最近的值。
条件验证
我们的要求是，当通知设置为电话，然后phonenumber FormControl应该是必填字段，如果它被设置为电子邮件，然后phonenumber FormControl不应该有任何验证。
让我们修改formControlValueChnaged() 函数，如下面的清单所示，以启用phonenumber FormControl上的条件验证。
formControlValueChanged() { const phoneControl = 这个。loginForm.get( 'phonenumber' );这个 .loginForm.get( 'notification' ).valueChanges.subscribe ((模式: 字符串) => {console.log (模式)；if (模式 === 'phone') {phoneControl.setValidators([Validators.required]);}else if (mode === 'email') {phoneControl.clearValidators();}phoneControl.updateValueAndValidity();});}
上面有很多代码，所以逐行交谈。
- 使用FormBuilder的get方法获取电话号码FormControl
- 订阅通知FormControl上的valueChanges方法
- 检查通知FormControl的当前值
- 如果当前值为phone，则使用FormControl的setValidators方法在phonenumber控件
- 如果当前值为email，则使用FormControl的clearValidators方法清除所有验证phonenumber控件
- 在上次调用updateValueAndValidity方法更新验证规则的phonecontrol
上设置所需的验证程序
运行应用程序，您将看到，当您更改通知值时，phonenumber的验证正在更改，
通过使用Angular Reactive Form的valueChanges方法，您可以实现条件验证和许多其他功能，例如对reactive form的基础数据模型中的更改做出反应。
喜欢这篇文章吗？
如果你喜欢这篇文章，请分享。另外，如果你还没有检查我们的图书馆，一定要这样做!它是最完整的工具箱基于材质的UI组件，最快Angular数据网格在市场上，和60个高性能图表!
</p