Множественная проверка компонента дочерней формы

У меня странная проблема. Так что на работе мне приходится рефакторить реактивную форму. Я должен составить часть формы. Мне нужно проверить ввод дочернего компонента в родительской форме, но по какой-то странной причине он не работает.

Я попробовал это на своем личном ноутбуке, и он отлично работает. Я могу проверить дочернюю форму, но мой компьютер на работе не будет.

проверка родительской формы: это только часть.

corporate_credit_card: this.fb.group({
          source_attributes: this.fb.group({
            number: ['', [Validators.maxLength(21),Validators.required]]
          })

дочерняя форма html:

<div [formGroup]="parentForm">
  <div
    class="mt-5 col"
    formGroupName="corporate_credit_card"
  >
    <div formGroupName="source_attributes">
       <input
          class="form-control"
          id="company_cc_name"
          type="text"
          name="company_cc_name"
          formControlName="name"
          placeholder="Credit Card Name"
          autocomplete="off"
        >
    </div>
 </div>
</div>

как я проверяю, работает ли проверка:

<pre>{{this.parentForm.get('corporate_credit_card.source_attributes.number').errors | json}}</pre>

** Я переделал что-то подобное на своем личном ноутбуке, и он работает, но здесь, на работе, он не работает.


angular angular-forms angular-validation
person aRtoo    schedule 29.03.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я обнаружил несколько ошибок в вашем последнем блоке кода. При интерполяции шаблона нет необходимости включать this. Кроме того, вы указали неправильный formControlName. Это должно быть number, а не name, поскольку вы назвали его number в объявлении реактивной формы в файле component.ts. Вы можете попробовать что-то вроде этого. Он должен правильно печатать результаты проверки ошибок:

<div formGroupName="source_attributes">
  <input
     class="form-control"
     id="company_cc_name"
     type="text"
     name="company_cc_name"
     formControlName="number"
     placeholder="Credit Card Name"
     autocomplete="off"
  >
</div>


<pre>{{ parentForm.get('corporate_credit_card.source_attributes.number').errors | json }}</pre>
person wentjun    schedule 29.03.2019
comment
простите. благодарю вас. не смог этого увидеть. Спасибо большое. ценю ответ. - person aRtoo; 29.03.2019
comment
@artoo Не беспокойтесь :) Надеюсь, вы сможете исправить это без проблем! - person wentjun; 29.03.2019
comment
плохо исправлю завтра. не могу скачать исходный код. смешной. но я сделаю это сегодня вечером, чтобы они думали, что я умный и быстрый. ооооочень - person aRtoo; 29.03.2019

arrow_upward
1
arrow_downward

Я переделал это на Stackblitz.com, после изменения все заработало

corporate_credit_card: this.fb.group({
          source_attributes: this.fb.group({
            number: ['', [Validators.maxLength(21),Validators.required]]
          })

к этому

corporate_credit_card: this.fb.group({
          source_attributes: this.fb.group({
            name: ['', [Validators.maxLength(21),Validators.required]]
          })

Я переименовал номер в имя

а затем переименовал шаблон

<pre>{{this.parentForm.get('corporate_credit_card.source_attributes.number').errors | json}}</pre>

к этому

<pre>{{this.parentForm.get('corporate_credit_card.source_attributes.name').errors | json}}</pre>

поэтому проблема, с которой вы столкнулись, - это атрибут number. поменяй на name

Короткий экран

https://stackblitz.com/edit/angular-ffvacz?embed=1&file=src/app/app.component.ts

person Sivuyile TG Magutywa    schedule 29.03.2019
comment
Извините, это моя ошибка. я торопилась уйти на работу. из-за отсутствия сверхурочной работы, но я проверю это после обеда. благодарю вас. ценить это. - person aRtoo; 29.03.2019