'Error: There are no form controls registered with this group yet. If you're using ngModel,you may want to check next tick (e.g. use setTimeout)

I am using template driven form and am trying to set the value of the form elements based on some object properties, however i face the following Error on doing so. Also here is my code for the TD form and how i am trying to access it.

.html file:

<div class="row">
  <div class="col-xs-12">
    <form (ngSubmit)="onAddDevice(f)" #f="ngForm">
      <div class="row">
        <div class="col-sm-5 form-group">
          <label for="name">Name</label>
          <input type="text" id="name" class="form-control" name="name" ngModel required>
        </div>
        <div class="col-sm-2 form-group">
          <label for="type">Type</label>
          <input type="text" id="type" class="form-control" name="type" ngModel required>
        </div>
        <div class="col-sm-5 form-group">
          <label for="platform">Platform</label>
          <input type="text" id="platform" class="form-control" name="platform" ngModel required>
        </div>
        <div class="col-sm-2 form-group">
          <label for="udid">UDID</label>
          <input type="text" id="udid" class="form-control" name="udid" ngModel required>
        </div>
      </div>

      <div class="row">
        <div class="col-xs-12">
          <button class="btn btn-success" type="submit" [disabled]="!f.valid">Add</button>
          <button class="btn btn-danger" type="button">Delete</button>
          <button class="btn btn-primary" type="button">Clear</button>
        </div>
      </div>
    </form>
  </div>
</div>

.ts file:

  @ViewChild('f') deviceForm: NgForm;
  @Output() deviceAdded = new EventEmitter<DeviceModel>();
  editedItemIndex: number;
  editedDevice: DeviceModel;

  constructor(private deviceService: DeviceService, private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.params
      .subscribe(
        (params: Params) =>{
            this.id = +params['id'];
            this.editMode = params['id'] != null;
            if ( this.editMode) {
              this.editedItemIndex = params['id'];
              this.editedDevice = this.deviceService.getDevice(params['id']);
              console.log(this.editedDevice.frame);
              this.deviceForm.setValue({
                name: this.editedDevice.name,
                platform: this.editedDevice.platform,
                type: this.editedDevice.type,
                udid: this.editedDevice.frame
              });
            }
        }
      );
  }

The problem is because of calling the setValue method on the form.

angular angular-forms

Solution 1:^[1]

As you are using template driven forms, the form controls will not be registered on init of the component. As the error message suggests use the setTimeout(), wrap your setvalue() as below, it will fix the issue.

 setTimeout(() => {
       this.deviceForm.setValue({
        name: this.editedDevice.name,
        platform: this.editedDevice.platform,
        type: this.editedDevice.type,
        udid: this.editedDevice.frame
      });
    }, );

Hope it helps...:)

Solution 2:^[2]

I faced the same problem, and I solved it doing this (the code snippet below, uses your form controls):

this.deviceForm.form.patchValue({
    name: this.editedDevice.name,
    platform: this.editedDevice.platform,
    type: this.editedDevice.type,
    udid: this.editedDevice.frame
});

Solution 3:^[3]

The solution I found is to assign the subscribe to a subscription and use OnDestroy to unsubscribe.

export class ShoppingEditComponent implements OnInit, OnDestroy {

  @ViewChild('f') form: NgForm;
  subscription :Subscription;
  id: number;
  editMode: boolean = false;

  constructor(private slService: ShoppingListService) {}

  ngOnInit() {
    this.subscription = this.slService.ingredientSelected.subscribe(
      (index: number) => {                        
        let ingredient = this.slService.getIngredient(index);
        this.form.setValue({
          name: ingredient.name,
          amount: ingredient.amount
        });        
        this.id = index;
        this.editMode = true;
      }
    )
  }

 ngOnDestroy(){
    this.subscription.unsubscribe();
  }

}

Solution 4:^[4]

You have to do something like:

if(this.deviceForm.controls['name']){
        this.deviceForm.setValue({
            name: this.editedDevice.name,
            platform: this.editedDevice.platform,
            type: this.editedDevice.type,
            udid: this.editedDevice.frame
          });
      }

Solution 5:^[5]

I got this error because in my form group I had a FormArray instead of a FormControl. Try checking your form group.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Shiva Nayak Dharavath
Solution 2	j3ff
Solution 3	David
Solution 4	Jva Dev
Solution 5	Anyijukire Janet

'Error: There are no form controls registered with this group yet. If you're using ngModel,you may want to check next tick (e.g. use setTimeout)

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]