1

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.

1
  • Note: the filenames in this question about.componet.* appear to have been misspelled, and I fixed them to about.component.* instead. Please amend them if they really were correct. Commented Apr 20, 2019 at 21:08

3 Answers 3

1

The problem is in this code of yours:

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

You do not need to add 2 controls of same name for just putting 2 validations. You can insert array of validators like following:

textForm = new FormGroup({
      url: new FormControl('', [Validators.required, Validators.pattern(this.pattern)])
});
Sign up to request clarification or add additional context in comments.

3 Comments

yes, But I think that pattern is not validating for URL type input because if I am giving the input like http//example.com still the error message is showing.
IT will take too much time to make for angular4.
validator is not working. I made a plnkr kind of a thing. stackblitz.com/edit/angular-wqz9sb?file=app%2Fapp.component.ts
1

You creation of url FormControl is wrong, because you dont need to create two controls. You should combine your validators:

Solution 1:

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

Solution 2:

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

5 Comments

Your modification showing error i.e-expected 1 argument but got 2.
@satya I updated my code for first solution. I forgot to add brackets []
Yes, but how the error will be shown in html page ?
@satya Check this answer (stackoverflow.com/questions/48658368/…) about error handling in angular reactive forms. At this answer you will find an live demo.
@satya Here is a link to the demo with validation: stackblitz.com/edit/angular-6gnxfx
0

Actually, you are creating a new control of url and two controls can't be created in a single form

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

4 Comments

I did like textForm = new FormGroup({ url: new FormControl('', Validators.required,Validators.pattern(this.pattern)) }); this as per you still some error.
pass into the array not as function textForm = new FormGroup({ url: new FormControl('', [Validators.required,Validators.pattern(this.pattern))] });
please test might be like this
I did like textForm = new FormGroup({ url: new FormControl('', [Validators.required, Validators.pattern(this.pattern))] }); but showing error , expected.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.