Наблюдаемые для Angular-форм

У меня есть форма на моем сайте (person.firstName, lastName, DOB, Gender, Citizenship, etc...). Мой вопрос в том, как я могу наблюдать за изменениями всей формы и получить из этого наблюдения 2 вещи:

  • formControl с его текущим статусом

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

    Префикс {{availablePrefix}}

          <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>

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


angular angular-forms angular-observable
person Dmitry Ganenco    schedule 25.07.2018    source источник
comment
что ты имеешь в виду ? formControl с его текущим статусом   -  person malbarmavi    schedule 25.07.2018
comment
Я имею в виду «грязный» или «нетронутый», «действительный» или «недействительный».   -  person Dmitry Ganenco    schedule 25.07.2018

Ответы (2)


arrow_upward
3
arrow_downward

valueChanges observable всегда будет подталкивать новое значение формы.

Для отслеживания состояния формы есть несколько свойств:

status Статус проверки элемента управления. Существует четыре возможных значения состояния проверки (VALID , INVALID , PENDING, DISABLED).

есть еще один наблюдаемый объект для отслеживания изменения статуса statusChanges

другие логические свойства только для чтения для отслеживания состояния формы:

(valid , invalid , pending , disabled , enabled , pristine , dirty , touched , untouched)

вы можете отслеживать старое состояние valeu с помощью этого трюка

  public form:FormGroup;
  oldValue:any;
  constructor (fb:FormBuilder) { 
     this.form = fb.group({
       name:[],
       lastName:[]
     });

     this.form.valueChanges.subscribe(newValue => { 
        console.log('old value',this.oldValue);
        this.oldValue = newValue;
        console.log('new form value',newValue);
        console.log('state ', this.form.status);
        console.log('pristine ',this.form.pristine);
        console.log('dirty ',this.form.dirty);
        console.log('touched ',this.form.touched);
     });
  }

пример stackblitz

AbstractControl

person malbarmavi    schedule 25.07.2018

arrow_upward
1
arrow_downward

Как только ваша форма будет создана (через FormBuilder), просто напишите следующее:

this.fmdForm.valueChanges.subscribe(formValue => { console.log(formValue); });
person Community    schedule 25.07.2018
comment
Спасибо, но как я могу получить formControl для этого измененного значения? - person Dmitry Ganenco; 25.07.2018
comment
formValue содержит все ваши элементы управления формой. Получите к ним доступ с помощью formValue.party.suffix. - person ; 25.07.2018
comment
Для статуса по-старому: this.fmdForm.get('party.suffix').valid - person ; 25.07.2018
comment
Я попробовал ваш ответ. formValue содержит только значения без состояния formControl - person Dmitry Ganenco; 25.07.2018
comment
Состояние не привязано к изменениям, состояние привязано к форме. Я сделал комментарий непосредственно перед вашим, чтобы рассказать вам, как получить состояние. - person ; 25.07.2018