Angular bind formcontrolname in sub component

Question

ok: I don't know if the caffeine isn't working, or what im overlooking, but i need the for-dummies on this one. I have a form, and a component within the form containing an input.

Here is the form template:

<div [formGroup]="parent">
  <h5 class="card-title">{{fieldLabel}}<audit-tooltip fieldName="fieldName" [plan]="plan"></audit-tooltip> </h5>
  <input [formControlName]="fieldName" class="form-control mx-sm-3 col-10" />
</div>

And here is the underlying typescript.

@Component({
  selector: 'info-control',
  templateUrl: './info-control.component.html',
  styleUrls: ['./info-control.component.css']
})
export class InfoControlComponent {
  @Input() fieldLabel: string;
  @Input() parent: FormGroup;
  @Input() plan: Plan;


  private _fieldName: string;
  @Input() public set fieldName(name: string) {
    this._fieldName = name;
  }
  public get fieldName(): string {
    return this._fieldName;
  }
}

And here is the implementation:

<form [formGroup]="disciplineForm" novalidate>
  <div class="card-body">
    <div class="row">
        <div class="col">
            <info-control [fieldLabel]="'Label Sample'" [parent]="disciplineForm" [fieldName]="'nameSample'" [plan]="plan"></info-control>
            <div class="invalid-tooltip">
              Length cannot exceed 50 characters.
            </div>
      </div>
      </div>
    </div>
</form>

I cannot seem to get [formControlName] or fieldName to show as "nameSample". If i include brackets I get nothing in the DOM -that attribute simply is ignored. If I remove them, then i get the literal string 'fieldName'.

What am I not understanding? This is my first angular 2+ app.

Can you also show, how you are creating the disciplineForm? — Amit Chigadani
– Amit Chigadani, Commented Aug 28, 2018 at 18:57
It would be better if you created a sample StackBlitz Project. You can fork this one out for simplicity : stackblitz.com/edit/… There's also audit-tooltip in there which we have no idea about. — SiddAjmera
– SiddAjmera, Commented Aug 28, 2018 at 18:58
@AmitChigadani - Thanks for the feedback, i should've dumped the audit-tooltip, as it wasnt relevant. I also missed the form, but for this example i would have just added a <form [forgroup]... etc> to encapsulate — Seth
– Seth, Commented Aug 28, 2018 at 20:08

SiddAjmera · Accepted Answer · 2018-08-28 19:07:11Z

1

The fieldName that you pass as an @Input property to the audit-tooltip should be used with the property binding syntax. Using that, I was able to pass fieldName and it was rendering with the value of nameSample.

Here's how:

<div [formGroup]="parent">
  <h5 class="card-title">
    {{fieldLabel}}<audit-tooltip [fieldName]="fieldName" [plan]="plan"></audit-tooltip>
  </h5>
  <input 
    [formControlName]="fieldName" 
    class="form-control mx-sm-3 col-10" />
</div>

Here's the StackBlitz if you want.

answered Aug 28, 2018 at 19:07

SiddAjmera

39.6k7 gold badges77 silver badges113 bronze badges

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

2 Comments

Seth Over a year ago

This worked. I truly and honestly have no idea what i did differently Between my earlier attempt at [formControlName] and this one. Though based on your stackblitz I did chance fieldName to a property from a variable in audit tooltip and that unclogged a separate issue. Thank you.

SiddAjmera Over a year ago

Glad I helped. Happy Jamming!

Collectives™ on Stack Overflow

Angular bind formcontrolname in sub component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related