can't bind to 'formcontrol' since it isn't a known property of 'input'

Hi Guys ,

In this blog I will share information related to error :
can't bind to 'formcontrol' since it isn't a known property of 'input'.

The complete error log is as follows :

Error in /turbo_modules/@angular/compiler@8.0.0/bundles/compiler.umd.js (2479:21)

Template parse errors:
Can't bind to 'formControl' since it isn't a known property of 'input'. ("<label>
Name:
<input type="text" [ERROR ->][formControl]="status">
</label>"): ng:///AppModule/StatusComponent.html@2:21
No provider for NgControl ("<label>
Name:
[ERROR ->]<input type="text" [formControl]="status">
</label>"): ng:///AppModule/StatusComponent.html@2:2

You may get this error while using angular reactive forms .

To fix this error add RectiveFormsModule in the inports array .

@NgModule({

  imports:      [ BrowserModule, FormsModule ,ReactiveFormsModule ],

  declarations: [ AppComponent, HelloComponent, StatusComponent ],

  bootstrap:    [ AppComponent ]

})

export class AppModule { }

Checkout the video on how to fix this error .

Hope this fixes the issue ! Thanks .

JSX expressions must have one parent element.

Hi Guys ,


This blog is about the error " JSX expressions must have one parent element.

Let's look at the erroneous code .

import React from 'react';

export default ({ name }) => <h1>Hello {name}!</h1>

<input type="text" placeholder="enter asset"/>;

You can see there are two elements <h1> and <input> .
The error is because react does not allow multiple component as a parent component . To fix this issue we can put the two elements under single parent component , like a <div> .

Let's fix the code .

import React from 'react';

export default ({ name }) => <div><h1>Hello {name}!</h1>

<input type="text" placeholder="enter asset"/>  </div>;

The error is gone . Hope this helps , Thanks !

Checkout this error in youtube .

Let me know if you still face error in the comments below .