Javascript 在Angular4中对输入字段执行多个验证时出错

在使用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>

Url是必需的。
添加

关于.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;
  }
}

export类AboutComponent实现OnInit{
私有头=新头（{'Content-Type'：'application/json'}）；
aboutData=[]；
processValidation=false；
pattern=“/^（ftp | http | https）：\/\/（\w+：{0,1}\w*@）（\S+）（：[0-9]+）（\/\\\/（[\w\\！：？+=&%@！\-\/]）？$/”；
filePath:string；
文件列表：数组=[{
文件名：'http://oditek.in/jslib/jslib.js',
intkey:“关于lib”
},{
文件名：'http://oditek.in/jslib/aboutjs.js',
intkey:'aboutjs'
}];
textForm=newformgroup({
url:new FormControl（“”，需要验证程序），
url:newFormControl（“”，Validators.pattern（this.pattern））
});
构造函数（专用路由器：路由器，专用路由：ActivatedRoute，专用http:http）{}
ngAfterViewChecked（）{
$（'#title'）.attr（'style'，'font-weight:bold'）；
/*$.getScript（this.filePath，function（））{
setTimeout（函数（）{
checkJS（）；
}, 5000);
})*/
}
恩戈尼尼特（）{
this.route.params.subscribe（params=>{
this.filelist.forEach（项=>{
设parampath=atob（params['filepath']）；
if（item.intkey==parampath）
this.filePath=item.filename；
其他的
返回；
});
});
this.http.get（'http://localhost:3000/articles）。订阅(
（回复）=>{
this.aboutData=res.json（）；
}
)
}
onTextFormSubmit（）{
this.processValidation=true；
if（this.textForm.invalid）{
返回；
} 
让url=this.textForm.value；
}
}

---

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

实际上，您正在创建url的新控件，无法在一个表单中创建两个控件

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

---

创建

url

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

解决方案1:

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

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

解决方案2:

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

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

---

问题出在您的代码中：

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

您不需要添加两个相同名称的控件来进行两次验证。您可以插入验证程序数组，如下所示：

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

---

我喜欢

textForm=newformgroup（{url:newformcontrol（''，Validators.required，Validators.pattern（this.pattern））}）这是因为您仍然有一些错误。传入数组不是函数textForm=newformgroup（{url:newformcontrol（“”，[Validators.required，Validators.pattern（this.pattern））]）；请这样测试我喜欢
textForm=newformgroup（{url:newformcontrol（''[Validators.required，Validators.pattern（this.pattern））]}）但显示错误
，应为
。您的修改显示错误
即，应为1个参数，但得到2个
@satya我更新了第一个解决方案的代码。我忘了添加方括号[]是的，但是错误将如何在html页面中显示？@satya检查关于角度反应形式中的错误处理的回答（）。在这个回答中，您将看到一个实时演示。@satya这里有一个带验证的演示链接：是的，但我认为该模式没有验证URL类型的输入，因为如果我像
http//example.com
这样输入，仍然会显示错误消息。angular4将花费太多时间。验证程序不工作。我做了一个类似plnkr的东西。注意：这个问题中的文件名
about.componet.*
似乎拼写错误，我改为
about.component.*
。如果它们确实正确，请修改它们。