CODEWITHSUNDEEP
angular
Barzille
Barzille

Reputation: 415

Angular Reactive Form disabling a option of Select programmatically

I want to disable ar option from a SELECT tag programmatically and tried it this way, but it's not working. I need some guidance :)

TS File:

...
formGroup = new FormGroup({
  sel: new FormControl()
});

ngOnInit() {
  this.formGroup.get("sel").get("a").disable();
}

HTML File:

<select formControlName="sel">
  <option value="a">a</option>
  <option value="b">b</option>
</select>

Upvotes: 1

Views: 6844

Answers (2)

Nimitt Shah
Nimitt Shah

Reputation: 4587

You can use [disabled] attribute with dynamic check..

<form [formGroup]="registrationForm" (ngSubmit)="onSubmit()">
  <select formControlName="cityName">
      <option value="">Choose your city</option>
      <option *ngFor="let city of cityList" [ngValue]="city" [disabled]="isSelected(city)">{{city}}</option>
  </select>

  <button type="submit" class="btn btn-danger btn-lg btn-block">Submit</button>
</form>

<br>
<hr>
<br>
<div *ngIf="selectedCityList.length > 0" class="city-list"><strong>Selected City : </strong><br><div *ngFor="let removeCity of selectedCityList"><span class="remove-city" title="Click to Remove" (click)="removeSelectedCity(removeCity)">Remove</span>&nbsp;&nbsp;{{removeCity}}</div></div>

For .ts file I have created 3 function - one will add to SelectedCity, second will check whether selected city is in SelectedCity and third will remove from SelectedCity.

  registrationForm = this.formBuilder.group({
    cityName: ["", [Validators.required]]
  });

  onSubmit() {
    if(!this.selectedCityList.includes(this.registrationForm.get("cityName").value)){
      console.log(this.registrationForm.get("cityName").value);
      this.selectedCityList.push(this.registrationForm.get("cityName").value);
    }
  }

  isSelected(city){
    return this.selectedCityList.includes(city);
  }

  removeSelectedCity(city){
    if(this.selectedCityList.includes(city)){
      this.selectedCityList.splice(this.selectedCityList.indexOf(city), 1);
    }
  }

You can test it here also you can test solution for FormBuilder here

Upvotes: 4

SELA
SELA

Reputation: 6833

If you want to disable an option in side the select you can use the [attr.disabled] in the traditional model driven method.

<select >
  <option [attr.disabled] = "true" value="a">a</option>
  <option value="b">b</option>
</select>

Or else you can pass the [attr.disabled] a predicate which evaluates true or false. Please find the Stackblitz here

How ever if you want to use the reactive forms method. this can be done in the form level and not FormGroup level. You can come up with solution in the selection change event while subscribing to your reactive form.

In your reactive form template :

<select (change)="changeCity($event)"formControlName="cityName">
             <option value="">Choose your city</option>
             <option *ngFor="let city of City" [ngValue]="city">{{city}}</option>
</select>

In your typescript controller :

export class AppComponent {
  City: any = [1, 2, 3, 4];

  constructor(public fb: FormBuilder) {
    this.registrationForm.get("cityName").valueChanges.subscribe(val => {
      if (val == 1) {
        this.registrationForm.get("cityName").reset();
        return; 
      } else {
        this.registrationForm.get("cityName").enable();
      }
    });
  }
}

Where in the case of user selecting 1 option it will reset its value and returns. Please find the StackBlitz here.

Upvotes: 1

Related Questions