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