Getting error while creating input filed which will take URL value using Angular4

Question

I am getting the following error while creating the url type input field using Angular4.

Error:

compiler.js:485 Uncaught Error: Template parse errors:
Can't bind to 'formGroup' since it isn't a known property of 'form'. ("
</nav>
<div>
<form [ERROR ->][formGroup]="textForm" (ngSubmit)="onTextFormSubmit()">
<input type="text" formControlName="url" id="): ng:///AppModule/AboutComponent.html@10:6
    at syntaxError (compiler.js:485)
    at TemplateParser.parse (compiler.js:24668)
    at JitCompiler._parseTemplate (compiler.js:34621)
    at JitCompiler._compileTemplate (compiler.js:34596)
    at eval (compiler.js:34497)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:34497)
    at eval (compiler.js:34367)
    at Object.then (compiler.js:474)
    at JitCompiler._compileModuleAndComponents (compiler.js:34366)

I am explaining my code below.

about.componet.html:

<form [formGroup]="textForm" (ngSubmit)="onTextFormSubmit()">
<input type="text" formControlName="url" id="weburl"><label *ngIf="textForm.get('url').invalid && processValidation" [ngClass] = "'error'"> Url is required. </label>
<button type="submit">ADD</button>
</form>

about.componet.ts:

import { Component, OnInit,AfterViewChecked } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import {Http,Response,Headers} from '@angular/http';
import {ActivatedRoute} from '@angular/router';
import {Router} from '@angular/router';
import 'rxjs/add/operator/toPromise';
declare var jquery:any;
declare var $ :any;
declare function checkJS();
@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.css']
})
export class AboutComponent implements OnInit {
  private headers = new Headers({'Content-Type':'application/json'});
  aboutData = [];
  processValidation = false;
  filePath:string;
  filelist: Array<{filename: string, intkey: string}> = [{
      filename: 'http://oditek.in/jslib/jslib.js',
      intkey: 'aboutlib'
      },{
      filename: 'http://oditek.in/jslib/aboutjs.js',
      intkey: 'aboutjs'
  }];
  textForm = new FormGroup({
      url: new FormControl('', Validators.required)
  });
  constructor(private router:Router,private route:ActivatedRoute,private http:Http) { }
  ngAfterViewChecked() {
    $('#title').attr('style','font-weight:bold');
    $.getScript(this.filePath,function(){
      setTimeout(function(){
        checkJS();
      }, 5000);
    })
  }
  ngOnInit() {
    this.route.params.subscribe(params=>{
      this.filelist.forEach(item => {
        let parampath=atob(params['filepath']);
        if(item.intkey==parampath)
          this.filePath = item.filename;
        else
          return;
      });
    });
    this.http.get('http://localhost:3000/articles').subscribe(
      (res:Response)=>{
        this.aboutData = res.json();
      }
    )
  }
  onTextFormSubmit(){
    this.processValidation = true;
    if (this.textForm.invalid) {
      return;
    } 
    let url = this.textForm.value;
  }
}

Actually here I am trying to validate the input field is taking only URL type input or not but got the above error. I need to resolve this error and the input field should take only URL type parameter(e.g.-http://example.com/js/).

Suren Srapyan · Accepted Answer · 2018-03-14 09:27:25Z

1

Add ReactiveFormsModule into your NgModule

import { ReactiveFormsModule } from '@angular/forms';

NgModule({
   imports: [
      ...
      ReactiveFormsModule;
      ...
   ]
})
...

answered Mar 14, 2018 at 9:27

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

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

9 Comments

user5443928 Over a year ago

I did as per you but same issue.

Suren Srapyan Over a year ago

import in that module which adds your component into its declarations

user5443928 Over a year ago

yes, I did it like import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';.

Suren Srapyan Over a year ago

ReactiveFormsModule import into the module. I think from your comment that you just imported it into the component file.

user5443928 Over a year ago

Yes I did it. Can you just suggest me how to validate his input field so that it will only take the url type parameter.

|

Collectives™ on Stack Overflow

Getting error while creating input filed which will take URL value using Angular4

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related