I have created a dropdown in Angular where there are values from 1 to 20 in it. If I select number &-CodePudding

html: -

   <div >
              <label for="experience" >I am experience</label>
                <select   formControlName="experience" name="experience" onchange="change(this);">
                  <option *ngFor="let experience of experiences">{{experience}}</option>
                </select>
               
              </div>

ts:-

  experiencesLessThanTenYears = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
  experiencesMoreThanTenYears = ['10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20'];
  experiences = [ ...this.experiencesLessThanTenYears, ...this.experiencesMoreThanTenYears];

 ngOnInit(): void {
  this.registrationForm = this.fb.group({
  firstName: ['', [Validators.required, Validators.minLength(3)]],
  lastName: ['', [Validators.required, Validators.minLength(3)]],
  startDate: [ '',[Validators.required]],
  endDate: ['',[Validators.required]],
  experience: ['',[Validators.required,]],
  })

I want to show message on selecting values less than 10 and greater than 10 on my view. Please help me on how to do that.

I tried using the change event of my html select but it was not working. I was hoping to make a custom validator but I don't know was just an idea. Please someone help me out

CodePudding user response：

{{ registrationForm.get('experience').value>10?
       'You have a great experience':
       'You have a poor experience'}}.

But this makes that if you don't selected anything show that you have a poor experience.

We can use a ng-container *ngIf in the way

<ng-container *ngIf="registrationForm.get('experience').value">
    {{ registrationForm.get('experience').value>10?
           'You have a great experience':
           'You have a poor experience'}}.
</ng-container>

Well, as we use a *ngIf, we can create a temporaly variable

<ng-container *ngIf="registrationForm.get('experience').value as experience">
    {{ experience>10?
           'You have a great experience':
           'You have a poor experience'}}.
</ng-container>

The another way is use a ternary operator inside a ternary operator. Really is an ugly (but equal effective solution)

{{registrationForm.get('experience').value?
        registrationForm.get('experience').value>10?
            'You have a great experience':
            'You have a poor experience':
       ''}}