Jak uniknąć duplikowania kodu w formularzach Angular 2?

Question

Wszystkie moje reaktywnych form zazwyczaj zawierają właściwości i metody:

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

Wybrałem je w abstrakcyjnej klasie

export abstract class BaseReactiveForm {..} 

I dziedziczą

@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(); 
    } 
...} 

Czy to prawda, że ​​decyzja?

Jak postępować właściwie? jakie są formy praktyki?

Answer 1

Zrobiłem to samo na moich projektach, stworzyłem klasę bazową do obsługi form reaktywnych. Myślę, że jest OK, powinniśmy użyć OOP, aby uprościć tego rodzaju rzeczy. Czytałem gdzieś, że poprawią tę część frameworka, ponieważ jest to powtarzalne, pełne gadek!

Oto mój 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; 
    } 
}