Wie vermeidet man Doppelungen von Code in den Formularen Angular 2?

Question

Alle meine reaktiven Formen umfassen in der Regel Eigenschaften und Methoden:

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

ich sie in der abstrakten Klasse ausgewählt

export abstract class BaseReactiveForm {..} 

Und erben

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

Stimmt es, dass Entscheidung?

Wie das Richtige zu tun? Was sind die Formen der Praxis?

Answer 1

Ich habe das gleiche auf meine Projekte, erstellt eine Basisklasse, um die reaktiven Formen Zeug zu behandeln. Ich denke, dass es ok ist, wir sollten OOP benutzen, um diese Art von Sachen zu vereinfachen. Ich habe irgendwo gelesen, dass sie diesen Teil des Frameworks anpassen werden, weil es sich wiederholend und ausführlich ist!

Hier ist meine 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; 
    } 
}