Как составлять компонент DRYup Angular 2?

Question

У меня есть компонент формы,

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

из сниппета, известно, что код нарушает DRY, с повторениями почти для всех полей формы! Возможно ли дальнейшее DRYup этот код, чтобы свести к минимуму повторения?

спасибо.

Answer 1

Вы можете попробовать что-то вроде этого:

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