Reactive Form登录注册表单重复代码复用方案咨询

Reactive Form完全支持通过组件封装重复的表单控件，这不仅能大幅减少代码冗余，还能提升后续的维护效率——毕竟以后要修改输入框样式、错误提示逻辑时，只需要改动一个地方就够了，比去两个表单里分别修改要靠谱得多。

下面是具体的实现步骤，以你重复的用户名输入框为例：

1. 创建通用表单字段组件 #

先新建一个可复用的表单字段组件（比如命名为app-form-field），它负责渲染基础的输入框、错误提示逻辑：

组件类（form-field.component.ts） #

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

@Component({
  selector: 'app-form-field',
  templateUrl: './form-field.component.html',
  styleUrls: ['./form-field.component.css']
})
export class FormFieldComponent {
  // 接收父组件传入的FormControl实例
  @Input() control!: FormControl;
  // 输入框占位符
  @Input() placeholder!: string;
  // 用于获取错误信息的键名（比如'username'/'email'）
  @Input() errorKey!: string;
  // 接收父组件的错误信息生成函数
  @Input() getErrorMessage!: (key: string) => string;
}

组件模板（form-field.component.html） #

<mat-form-field class="example-full-width">
  <input matInput [placeholder]="placeholder" [formControl]="control">
  <mat-error *ngIf="control.invalid">{{ getErrorMessage(errorKey) }}</mat-error>
</mat-form-field>

2. 在登录/注册表单中复用组件 #

现在你可以把原来重复的代码替换成这个组件，比如登录表单：

<div class="login_wrap">
  <div class="login">
    <form [formGroup]="form" novalidate>
      <h2>Login</h2>
      
      <!-- 复用通用组件 -->
      <app-form-field 
        [control]="form.controls['username']"
        placeholder="Username"
        errorKey="username"
        [getErrorMessage]="getErrorMessage"
      ></app-form-field>
      
      <!-- 密码字段可以单独封装（因为有可见性切换），或者扩展通用组件 -->
      <mat-form-field class="example-full-width">
        <input matInput placeholder="Enter your password" [type]="hide ? 'password' : 'text'" [formControl]="form.controls['password']">
        <mat-icon matSuffix (click)="hide = !hide" class="eye">
          {{hide ? 'visibility' : 'visibility_off'}}
        </mat-icon>
        <mat-error *ngIf="form.controls['password'].invalid">{{ getErrorMessage('password') }}</mat-error>
      </mat-form-field>
      
      <div class="but_wrap">
        <button mat-fab color="primary" (click)="onSubmit(form)" [disabled]="form.invalid">
          <mat-icon>keyboard_backspace</mat-icon>
        </button>
        <button mat-fab color="accent" [routerLink]="'/registration'">
          <mat-icon>group</mat-icon>
        </button>
      </div>
    </form>
  </div>
</div>

注册表单中的用户名、邮箱字段也可以用同样的方式替换，代码会立刻清爽很多。

额外优化建议 #

• 对于密码这种有特殊交互（可见性切换）的字段，可以单独封装一个app-password-field组件，或者在通用组件里加一个isPassword输入属性来控制是否显示切换图标和输入类型
• 如果你的错误提示逻辑比较通用，也可以把getErrorMessage的逻辑封装到通用组件里，不用从父组件传递

为什么不保持现状？ #

重复代码是维护的噩梦——以后如果要修改输入框的样式、调整错误提示的触发条件，你需要在两个甚至更多地方做相同的修改，很容易遗漏或者出错。封装组件是长期来看更高效的选择，完全适配Reactive Form的机制，不用担心兼容性问题。

内容的提问来源于stack exchange，提问作者Стас Рябцев