Многократная проверка на дочернем компоненте формы - PullRequest
Новая
       23

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

0 голосов
/ 29 марта 2019

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

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

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

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>

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

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

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

Ответы [ 2 ]

1 голос
/ 29 марта 2019

Я переделал это в 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]]
          })

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

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

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

к этому 

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

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

Screen Short

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

1 голос
/ 29 марта 2019

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

<code><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 }}
...