oop - 如何避免 Angular 2 表单中的代码重复？

Question

我所有的响应式表单通常都包含属性和方法:

  @Input()
  public form: FormGroup;

  public messages = VALIDATION_MESSAGES;

  @Output()
  public onFormSubmit: EventEmitter<any> = new EventEmitter();

  @Input()
  public formData;

  @Input()
  public controlsConfig: any;

  protected abstract fb: FormBuilder;

  isValidControl(controlName: string): boolean {
    const control = this.form.controls[controlName];
    return control.valid || control.pristine;
  }
  onSubmit(): void {
    const form = this.form;

    if(form.valid) {
      this.onFormSubmit.emit(form.value);
    }
  }

我在抽象类中选择了它们

export abstract class BaseReactiveForm {..}

并继承

@Component({
  selector: 'app-login-form',
  templateUrl: './login-form.component.html',
  styleUrls: ['./login-form.component.css']
})
export class LoginFormComponent extends BaseReactiveForm implements OnInit {

  constructor(protected fb: FormBuilder) {
    super();
  }
...}

这个决定是真的吗？

如何做正确的事？有哪些实践形式？

Answer 1

我在我的项目中做了同样的事情，创建了一个基类来处理响应式表单。我认为没关系，我们应该使用 OOP 来简化这种东西。我在某处读到他们将调整框架的这一部分，因为它是重复的、冗长的!

这是我的实现:

import { FormGroup } from '@angular/forms';

export interface ValidatableFormComponent {
    formGroup: FormGroup;
    formErrors: any;
    validationMessages: any;
    onValueChanged(data?: any): void;
    buildForm(): void;
    onSubmit($event): void;
}

import { FormGroup, FormBuilder } from '@angular/forms';
import { ValidatableFormComponent } from './validatable-form.component';

export class FormBaseComponent implements ValidatableFormComponent {
  formGroup: FormGroup;
  formErrors: any;
  validationMessages: any;

  constructor(protected fb: FormBuilder) { }

  buildForm(): void {
    this.formGroup.valueChanges
      .subscribe(data => this.onValueChanged(data));
    this.onValueChanged();
  }

  onSubmit($event): void {
    $event.preventDefault();
  }

  onValueChanged(data?: any): void {
    if (!this.formGroup) {
      return;
    }

    const form = this.formGroup;
    for (const field in this.formErrors) {
      if (this.formErrors.hasOwnProperty(field)) {
        this.formErrors[field] = '';
        const control = form.get(field);

        if (control && control.dirty && !control.valid) {
          const messages = this.validationMessages[field];
          for (const key in control.errors) {
            if (control.errors.hasOwnProperty(key)) {
              this.formErrors[field] += messages[key] + ' ';
            }
          }
        }
      }
    }
  }

  isValid(): boolean {
    return this.formGroup.valid;
  }
}