Класс для обработки сложных форм, используя угловые ReactiveForms


Я работаю с ReactiveForms в Angular5 и пытаюсь найти хороший способ сделать это.

Так, в моем случае использовать, у меня FormGroup в моем примере.компонент.Ц и когда мне нужно добавить некоторые FormControl я должен сделать это:

ngOnInit() {
  this.form = new FormGroup({
    'myCompany': new FormControl(this.company, Validators.required),
    'myId': new FormControl(),
    'myDate': new FormControl(new Date().toISOString(), Validators.required),
    'mySotck': new FormControl('', Validators.required),
    'myItemsStock': new FormControl([], Validators.required)
  });

//[...] more codes

Ну, пока все хорошо работает, не важно. Но мой пример.компонент.ТС имеет немного больше полей и некоторые из этих полей имеют специальное поведение, что-то вроде этого:

ngOnInit() {

  // [...] more codes

  this.form.get('operation').valueChanges.subscribe(value => {

    if (!isNullOrUndefined(value)) {
       const operacao: MyModel = value;

      if (operacao.something) {
        this.limitDate = new Date();
      }

      if (!operacao.something) {

        this.service.search(this.company).subscribe(response => {
          const dateOffset = (24 * 60 * 60 * 1000) * response.days

          this.limitDate = new Date(new Date().getTime() - dateOffset);
        });
      }
    }

  });

  // [...] more codes

потому что это мой компонент становится много кода линий, более 400 линий. И я чувствую, что это будет очень трудно прочитать, понять и техническое обслуживание.

Чтобы решить эту проблему, я думал о создании нового класса, расширить FormGroup и затем установить мои FormControls, проверки, и поведение внутри этого нового класса:

export class CustomFormGroup extends FormGroup {

  constructor() {
    super({
      'myCompany': new FormControl(this.company, Validators.required),
      'myId': new FormControl(),
      'myDate': new FormControl(new Date().toISOString(), Validators.required),
      'mySotck': new FormControl('', Validators.required),
      'myItemsStock': new FormControl([], Validators.required)
    });
  }

  registerListeners() {
    this.get('operation').valueChanges.subscribe(value => {

      if (!isNullOrUndefined(value)) {
        const operacao: MyModel = value;

        if (operacao.something) {
          this.limitDate = new Date();
        }

        if (!operacao.something) {

          this.service.search(this.company).subscribe(response => {
            const dateOffset = (24 * 60 * 60 * 1000) * response.days

            this.limitDate = new Date(new Date().getTime() - dateOffset);
          });
        }
      }
    }
  }

Мое намерение заключается в том, чтобы уменьшить сложность мой компонент и сделать его более Клири читать и понимать. И разделить ответственность за управление форме в другой класс, поэтому, когда мне нужно использовать форму, я могу использовать это так:

// example.component.ts
this.form = new CustomFormGroup();

С таким подходом, мне не нужно, чтобы поведение любой форме в мой компонент, когда он содержится на мои пользовательские FormGroup. Мой вопрос, Является ли это лучшим способом, чтобы отделить проблемы, и что будет лучше для этого.

Я буду очень рад, если вы дать мне некоторые идеи, поделиться своим опытом или отзыв о этом подходе. Чувствовать себя совершенно свободно комментировать этот вопрос.

Мне жаль, если то, что я написал, Было трудно понять, английский не мой родной язык и я пытаюсь улучшить каждый день.



Комментарии