Multiple Validation on child form component

Question

I have a weird problem. So at work, I have to refactor a reactive form . I have to componentize part of the form. I have to validate a child component input on the parent form but for some weird reason it doesnt work.

I tried it on my personal laptop and it's working fine. I can validate a child form, but my computer at work won't.

parent form validation: this is just part of it.

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

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

how I check if the validation is working:

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

**I remake a something like this on my personal laptop and its working but here at work it doesn't.

wentjun · Accepted Answer · 2019-03-29 01:57:19Z

1

I have discovered some errors on your last block of code. On your template interpolation, there is no need to include this. In addition, you have referenced the wrong formControlName. It should be number, not name, since you named it as number on your reactive form declaration within your component.ts. You can try something like this. It should print the error validation results properly:

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

edited Mar 29, 2019 at 1:57

answered Mar 29, 2019 at 1:51

wentjun

42.8k10 gold badges108 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

aRtoo Over a year ago

sorry. thank you. wasnt able to see this. thank you so much. appreciate the reply.

wentjun Over a year ago

@artoo No worries :) Hope you are able to fix it smoothly!

aRtoo Over a year ago

ill fix it tomorrow. cant download the source code. lol. but ill do it tonight so they think im smart and fast. looools

Sivuyile TG Magutywa · Accepted Answer · 2019-03-29 01:58:59Z

1

I remade this in Stackblitz.com , It worked after changing

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

to this

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

I renamed number to name

and then renamed the template

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

to this

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

so the issue you was is the number attribute. change it to name

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

edited Mar 29, 2019 at 1:58

answered Mar 29, 2019 at 1:53

Sivuyile TG Magutywa

1,28114 silver badges17 bronze badges

1 Comment

aRtoo Over a year ago

sorry my bad. i was in a hurry to leave at work. because of no overtime, but ill check this after dinner. thank you. appreciate it.

Collectives™ on Stack Overflow

Multiple Validation on child form component

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related