javascript - 在 Angular4 中对输入字段实现多重验证时出错

Question

我在使用 Angular4 对单个输入字段实现多重验证时遇到以下错误。

错误:

ERROR in src/app/about/about.component.ts(30,7): error TS1117: An object literal cannot have multiple properties with the same name in strict mode.
src/app/about/about.component.ts(30,7): error TS2300: Duplicate identifier 'url

这是我的代码:

关于.component.html:

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

关于.component.ts:

export class AboutComponent implements OnInit {
  private headers = new Headers({'Content-Type':'application/json'});
  aboutData = [];
  processValidation = false;
  pattern="/^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/";
  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),
      url: new FormControl('', Validators.pattern(this.pattern))
  });
  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;
  }
}

我在这里需要空白字段和​​单个输入字段的模式验证。所有相应的错误消息都将显示在输入字段下方，但我收到此错误。

Answer 1

问题出在你的这段代码中:

textForm = new FormGroup({
      url: new FormControl('', Validators.required),
      url: new FormControl('', Validators.pattern(this.pattern))
});

您不需要添加 2 个相同名称的控件，只需放置 2 个验证即可。您可以插入验证器数组，如下所示:

textForm = new FormGroup({
      url: new FormControl('', [Validators.required, Validators.pattern(this.pattern)])
});