在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)])
});

Answer 2

你创建urlFormControl 是错误的，因为你不需要创建两个控件。你应该结合你的验证器：

解决方案 1：

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

解决方案 2：

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

Answer 3

其实你是新建一个url的控件，不能在一个表单中创建两个控件

this.formName.group({
      title: [null,[Validators.required,Validators.pattern(this.pattern)]],
})