Angular 5：响应式表单无效时如何禁用跨组件发送按钮？

嘿，这个需求在Angular里其实有两种很常用的实现方案，我帮你一步步理清楚：

方案一：通过@Output事件绑定（简单直接，适合父子组件直接通信） #

这种方式不需要额外的服务，直接利用Angular的组件输出事件来传递表单的有效性状态：

1. 子组件（form.component.ts）中定义输出事件并监听表单状态
   在你的表单组件里，先引入@Output和EventEmitter，然后监听响应式表单的statusChanges，每次状态变化时把当前的valid状态发送给父组件：

   import { Component, Output, EventEmitter } from '@angular/core';
   import { FormGroup, FormBuilder, Validators } from '@angular/forms';
   
   @Component({
     selector: 'app-form',
     templateUrl: './form.component.html',
     styleUrls: ['./form.component.css']
   })
   export class FormComponent {
     myForm: FormGroup;
     @Output() formValidityChange = new EventEmitter<boolean>();
   
     constructor(private fb: FormBuilder) {
       // 初始化响应式表单
       this.myForm = this.fb.group({
         username: ['', Validators.required],
         email: ['', [Validators.required, Validators.email]]
         // 其他表单控件...
       });
   
       // 监听表单状态变化
       this.myForm.statusChanges.subscribe(status => {
         this.formValidityChange.emit(this.myForm.valid);
       });
     }
   }
   

2. 父组件（app.component）中接收状态并控制按钮
   在父组件的模板里，使用子组件时绑定输出事件，把状态存到本地变量，再用这个变量控制按钮的禁用状态：

   <!-- app.component.html -->
   <app-form (formValidityChange)="onFormValidityChange($event)"></app-form>
   <button [disabled]="!isFormValid">发送</button>
   

   然后在父组件的ts文件里定义变量和处理方法：

   import { Component } from '@angular/core';
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent {
     isFormValid = false;
   
     onFormValidityChange(isValid: boolean) {
       this.isFormValid = isValid;
     }
   }
   

方案二：通过共享服务（适合复杂场景，比如跨多层组件通信） #

如果你以后需要在多个组件里用到这个表单状态，共享服务会更灵活：

1. 创建共享服务（form-status.service.ts）
   用BehaviorSubject来存储状态，它能保存当前值，新订阅者能立即拿到最新状态：

   import { Injectable } from '@angular/core';
   import { BehaviorSubject } from 'rxjs';
   
   @Injectable({ providedIn: 'root' })
   export class FormStatusService {
     private formValiditySubject = new BehaviorSubject<boolean>(false);
     formValidity$ = this.formValiditySubject.asObservable();
   
     updateFormValidity(isValid: boolean) {
       this.formValiditySubject.next(isValid);
     }
   }
   

2. 子组件中注入服务并更新状态
   在表单组件里注入服务，同样监听statusChanges来更新服务里的状态：

   import { Component } from '@angular/core';
   import { FormGroup, FormBuilder, Validators } from '@angular/forms';
   import { FormStatusService } from './form-status.service';
   
   @Component({
     selector: 'app-form',
     templateUrl: './form.component.html',
     styleUrls: ['./form.component.css']
   })
   export class FormComponent {
     myForm: FormGroup;
   
     constructor(private fb: FormBuilder, private formStatusService: FormStatusService) {
       this.myForm = this.fb.group({
         username: ['', Validators.required],
         email: ['', [Validators.required, Validators.email]]
       });
   
       this.myForm.statusChanges.subscribe(() => {
         this.formStatusService.updateFormValidity(this.myForm.valid);
       });
     }
   }
   

3. 父组件中订阅服务状态
   在父组件里注入服务，订阅状态流来控制按钮：

   import { Component, OnInit, OnDestroy } from '@angular/core';
   import { FormStatusService } from './form-status.service';
   import { Subscription } from 'rxjs';
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent implements OnInit, OnDestroy {
     isFormValid = false;
     private subscription!: Subscription;
   
     constructor(private formStatusService: FormStatusService) {}
   
     ngOnInit() {
       this.subscription = this.formStatusService.formValidity$.subscribe(isValid => {
         this.isFormValid = isValid;
       });
     }
   
     ngOnDestroy() {
       // 记得取消订阅防止内存泄漏
       this.subscription.unsubscribe();
     }
   }
   

   父组件的模板还是一样用[disabled]="!isFormValid"绑定按钮。

关键说明 #

响应式表单的statusChanges是一个Observable，它会在表单的有效性状态变化时发出通知，我们通过订阅它就能实时获取表单的valid状态——这就是响应式表单实现这个需求的核心点，和模板驱动表单的思路类似，但更灵活可控。

内容的提问来源于stack exchange，提问作者Smokey Dawson