HTTP-запрос Angular 6 для части большой формы

У меня есть большая форма в моем SPA (person.firstName, lastName, DOB, Gender, Citizenship и т. Д.). Мне нужно отправить на серверную часть для проверки бизнес-логики каждую часть этой формы (которые сгруппированы по их области действия), когда она была заполнена.

Например: отправить всю форму, если firstName и lastName равны touched и valid, а другая часть формы - pristine или valid. И примените тот же подход к другим группам.

<form [formGroup]="fmdForm" novalidate>
        <div class="form-row">
          <div class="col">
            <label for="prefix">Prefix</label>
            <select formControlName="party.prefix" id="prefix" >
              <option [value]="availablePrefix" *ngFor="let availablePrefix of availablePrefixes">{{availablePrefix}}
              </option>
            </select>
          </div>

          <div class="col">
            <label for="firstName">First Name<span style="color: red"> *</span> </label>
            <input formControlName="party.firstName" type="text" autocomplete="off" id="firstName"/>
          </div>

          <div class="col">
            <label for="middleName">Middle Name</label>
            <input formControlName="party.middleName" type="text" autocomplete="off" id="middleName" maxlength="1" />
          </div>

          <div class="col">
            <label for="lastName">Last Name<span style="color: red"> *</span> </label>
            <input formControlName="party.lastName" type="text" autocomplete="off" id="lastName"/>
          </div>

          <div class="col">
            <label for="suffix">Suffix</label>
            <select formControlName="party.suffix" id="suffix">
              <option [value]="availableSuffix" *ngFor="let availableSuffix of availableSuffixes">{{availableSuffix}}
              </option>
            </select>
          </div>
        </div>
      </form>

Это небольшой пример моей формы, в которой должны быть представлены группы prefix, firstName, middleName, lastName, suffix.

Спасибо за любую помощь

ОБНОВИТЬ:

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

  • formControl с текущим статусом
  • текущее значение для обработанного formControl

angular angular-forms angular-httpclient
person Dmitry Ganenco    schedule 20.07.2018    source источник
comment
Привет и добро пожаловать в stackoverflow, у вашего сообщения нет вопросов, и вы не предоставляете код, который показывает нам, что вы уже пробовали.   -  person Yanis-git    schedule 20.07.2018
comment
Возможно, вы захотите заглянуть в официальную документацию. Люди здесь не могут запрограммировать для вас логику. Формы поставляются с наблюдаемыми объектами, на которые вы можете подписаться.   -  person ak.leimrey    schedule 20.07.2018

Ответы (1)


arrow_upward
0
arrow_downward

Поскольку неясно, что именно вы хотите (ну, на самом деле похоже, что вы хотите, чтобы кто-то кодировал это для вас), я могу предложить только ТАКОЕ подробное руководство. Вы можете подписаться на изменения в вашей форме, используя ... Observables. Это мощный инструмент для отслеживания изменений, происходящих в фоновом режиме. Это могло выглядеть так ...

ngOnChanges(): void {
    this.queryForm.controls[this.queryConditionsS].valueChanges.takeUntil(this.ngUnsubscribe).subscribe(val => {
      this.queryFormObserver = val;
      // console.log(this.queryFormObserver);
    })
  }

В моем случае я хотел проверить, какие параметры содержатся в моих динамически сгенерированных полях выбора. Поэтому я сохранил их в массиве, чтобы всегда можно было фильтровать доступные параметры, поскольку каждый вариант нужно было выбирать ТОЛЬКО один раз.

Конечно, вы мало что можете сделать в отношении своей формы. Конечно, вы также можете отслеживать текущее состояние каждого из ваших полей.

https://angular.io/guide/forms

Хотя я не обращаюсь к официальной документации по всем проблемам, формы довольно хорошо объяснены.

person ak.leimrey    schedule 20.07.2018