Wie kann ich die Angular 2 Form-Komponente DRYup?

Question

ich eine Form Komponente haben,

@Component({ 
    templateUrl: '/app/contact/contact.component.html', 
    styleUrls: ['app/contact/contact.css'], 
    directives: [FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES], 
    providers: [FormBuilder] 
}) 

export class ContactComponent { 

    contactForm: FormGroup; 

    subjets = ['Informations', "Offre d'Emploi"]; 

    name: AbstractControl; 
    email: AbstractControl; 
    message: AbstractControl; 
    subjet: AbstractControl; 
    comment: AbstractControl; 

    constructor(fb: FormBuilder) { 

    this.contactForm = fb.group({ 
     'name': ['', Validators.compose([Validators.required, Validators.minLength(2)])], 
     'email': ['', Validators.compose([Validators.required, Validators.minLength(2)])], 
     'subjet': ['', Validators.compose([Validators.required, Validators.minLength(2)])], 
     'comment': ['', Validators.compose([Validators.required, Validators.minLength(20)])] 
    }); 
    this.name = this.contactForm.controls['name']; 
    this.email = this.contactForm.controls['email']; 
    this.subjet = this.contactForm.controls['subjet']; 
    this.comment = this.contactForm.controls['comment']; 
    } 

    onSubmit(form: any): void { 
    console.log('Valeurs du formulaire:', form); 
    } 
} 

aus dem Snippet ist es bekannt, dass der Code DRY, für fast alle Formularfelder mit Wiederholungen verletzt! Ist es möglich, diesen Code weiter zu DRYup, um die Wiederholungen zu minimieren?

danke.

Answer 1

Sie können so etwas wie dies versuchen:

constructor(fb: FormBuilder) { 
    let group = {}; 

    const fields = [ 
    { key: 'name', len: 2 }, 
    { key: 'email', len: 2 }, 
    { key: 'subjet', len: 2 }, 
    { key: 'comment', len: 20 }]; 

    fields.forEach(field => { 
    group[field.key] = ['', 
     Validators.compose([Validators.required, Validators.minLength(field.len)])]; 
    }); 

    this.contactForm = fb.group(group); 

    fields.forEach(field => { 
    this[field.key] = this.contactForm.controls[field.key] 
    }); 
}