Question

我有一个奇怪的问题。所以在工作中，我必须重构一个反应形式。我必须将表格的一部分组成。我必须验证父表单上的子组件输入，但是由于某些奇怪的原因，它不起作用。

我在个人笔记本电脑上尝试过，并且工作正常。我可以验证儿童表格，但无法使用我的计算机。

父表单验证：这只是其中的一部分。

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>

**我在个人笔记本电脑上重新制作了类似的东西，并且可以正常工作，但是在这里却不能。

Answer 1

我在您的最后一块代码中发现了一些错误。在模板插值中，无需包含this。此外，您引用了错误的formControlName。它应该是number，而不是name，因为您在component.ts中的反应形式声明中将其命名为number。您可以尝试这样的事情。它应该正确打印错误验证结果：

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

Answer 2

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

子表单组件的多重验证

2 个答案: