Angular : How to access Form control which is inside Form Group from HTML

Question

I am trying to display form Control "name" in HTML

The Form control "name" is grouped inside form group : "sample"

Am not aware of hierarchy

Here is the HTML code :

<p contenteditable="true" [formControl]="name"> </p>

<div>
    FORM GROUP Value : {{ sample.value | json }}
    <br>
    FORM CONTROL VALUE : {{sample.value.name}}
</div>

HERE IS the TYPESCRIPT CODE :

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
import { Title } from '@angular/platform-browser';
import { Router } from '@angular/router';

@Component({
  selector: 'app-ng-contenteditable-my-example1',
  templateUrl: './ng-contenteditable-my-example1.component.html',
  styleUrls: ['./ng-contenteditable-my-example1.component.scss']
})
export class NgContenteditableMyExample1Component implements OnInit {

  constructor(private formbuilder: FormBuilder,
    private titleService: Title,
    private _router: Router) {
      this.titleService.setTitle('formbuilder');
  }

  ngOnInit() {
    // console.log("Sample Status : " + this.sample.status);
    this.sample.controls.name.setValue(`Ashish`)
  }

  sample : FormGroup = new FormGroup({
    name : new FormControl(null,[Validators.nullValidator])
  });

}

I an getting this error :

NgContenteditableMyExample1Component.ngfactory.js? [sm]:1 ERROR Error: Cannot find control with unspecified name attribute
    at _throwError (forms.js:3357)
    at setUpControl (forms.js:3181)
    at FormControlDirective.ngOnChanges (forms.js:7102)
    at checkAndUpdateDirectiveInline (core.js:31906)
    at checkAndUpdateNodeInline (core.js:44367)
    at checkAndUpdateNode (core.js:44306)
    at debugCheckAndUpdateNode (core.js:45328)
    at debugCheckDirectivesFn (core.js:45271)
    at Object.eval [as updateDirectives] (NgContenteditableMyExample1Component.html:23)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:45259)

You should either wrap the ‘input’ inside a formgroup sample or you could get the form control using [formControl]=“sample.get(‘name’)” — MikeOne, Nov 13 '19 at 19:34
If you use a FormGroup, use a form and inside use formControlName="name", if only need a FormControl, you needn't create a FormGroup, create a simple FormControl: `name=new FormControl(null,Validators.nullValidator)`. BTW in Angular **not** exist Validators.nullValidator else Validators.required. read the doc: https://angular.io/guide/reactive-forms — Eliseo, Jun 30 '21 at 19:24

score 1 · Answer 1 · answered Nov 13 '19 at 18:04

It is because [formControl]="name" is a data-bound property, which means it will look for a variable called name in your component class. Because you don't have any, you will get that error.

You can fix this either by doing this formControlName='name' or [formControlName]="'name'"

Also, note that the formControl directive must refer to a FormControl instance, not to a string that maps to a FormControl.

score 0 · Answer 2 · answered Jun 30 '21 at 18:29

0

You can access a FormControl that's defined inside a FormGroup this way:

<p contenteditable="true" [formControl]="sample.get('name')"> </p>

answered Jun 30 '21 at 18:29

Yacine Marouf

386
2
4

Angular : How to access Form control which is inside Form Group from HTML

2 Answers2