如何避免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来简化这种东西。我在某处读到他们会调整这部分框架，因为它是重复的，冗长的！

这里是我的默认地将Impl：

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; 
    } 
}