Question

使用Angular4创建url类型输入字段时出现以下错误。

错误：

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)

我正在解释下面的代码。

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;
  }
}

实际上我在这里尝试验证输入字段是否仅采用URL类型输入，但得到了上述错误。我需要解决此错误，输入字段应仅采用URL类型参数（e.g.-http://example.com/js/）。

Answer 1

将ReactiveFormsModule添加到您的NgModule

中

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

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

创建输入字段时出错，这将使用Angular4获取URL值

1 个答案: