Angular CLI disable html form if previous option not selected?

Question

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"?

Emilien · Accepted Answer · 2021-03-25 09:33:54Z

1

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();
  })
}

answered Mar 25, 2021 at 9:33

Emilien

2,7534 gold badges17 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mantas Over a year ago

Works well, thank you so much, marking as answer asap

Emilien Over a year ago

Great ! Could you please mark it as resolved ? :D

Arnaud Denoyelle · Accepted Answer · 2021-03-25 09:47:11Z

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();
    } 
  }

Collectives™ on Stack Overflow

Angular CLI disable html form if previous option not selected?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related