CODEWITHSUNDEEP
htmlangulartypescriptformsselect
Mantas
Mantas

Reputation: 85

Angular CLI disable html form if previous option not selected?

I have a form that has a few select fields populated with options.

    <form [formGroup]="selectVehicleForm">
        
    <select formControlName="Manufacturer">
    <option *ngFor='let cars of cars$'>{{cars.Manufacturer}}</option>
    </select>

     <select formControlName="Model">
     <option *ngFor='let cars of cars$'>{{cars.Model}}</option>
     </select>
</form>

My question - how can I disable my "Model" field as long as a user has nothing selected in "Manufacturer"?

Upvotes: 0

Views: 24

Answers (2)

Arnaud Denoyelle
Arnaud Denoyelle

Reputation: 31283

You can listen (change) on the FormControl Manufacturer and call enable()/disable() on the FormControl Model

See the Stackblitz

Relevant parts are :

HTML

  <select formControlName="Manufacturer" (change)="onChangeManufacturer($event)">
    <option *ngFor='let cars of cars$'>{{cars.Manufacturer}}</option>
  </select>

Typescript

  selectVehicleForm = new FormGroup({
    Manufacturer: new FormControl(),
    Model: new FormControl(),
  });

  ngOnInit() {
    this.selectVehicleForm.controls['Model'].disable();
  }

  onChangeManufacturer(value) {
    const formControlModel = this.selectVehicleForm.controls['Model'];
    if(this.selectVehicleForm.controls['Manufacturer']) {
      formControlModel.enable();
    } else {
      formControlModel.disable();
    } 
  }

Upvotes: 1

Emilien
Emilien

Reputation: 2759

You can try like this (not tested) :

constructor(private fb: FormBuilder) {
  this.selectVehicleForm = this.fb.group({
    Manufacturer: [],
    Model: [{ value: '', disabled: true }]
  )};

  this.selectVehicleForm.get('Manufacturer').valueChanges.subscribe(value => {
    if (value) {
      this.selectVehicleForm.get('Model').enable();
    } else {
      this.selectVehicleForm.get('Model').reset('');
      this.selectVehicleForm.get('Model').disable();
    }
    this.selectVehicleForm.updateValueAndValidity();
  })
}

Upvotes: 1

Related Questions