I am getting the following error while implementing the multiple validation for single input field using Angular4.
Error:
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
Here is my code:
about.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>
about.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;
}
}
I need here the blank field and pattern validation for single input field. All respective error message will display below the input field but I am getting this error.
about.componet.*appear to have been misspelled, and I fixed them toabout.component.*instead. Please amend them if they really were correct.