My form displays like this when everything is selected:
https://i.sstatic.net/1kp0w.png
If the user changes the brand, I want it to look like this:
https://i.sstatic.net/hFVy8.png
The options in the second dropdown list are based on the selection in the first dropdown list, and the colored boxes act as radio buttons that change based on the previous selections.
Currently, I can choose a 'Toyota Furious FT18DV blue' without the form validating until all values are checked. However, if I change either of the dropdown list selections, the form doesn't clear the later inputs and still validates even though the combination should not be possible.
How can I deselect the outdated values in the later controls and reset the validation?
@Component({
selector: 'app-car-chooser',
templateUrl: './car-chooser.component.html',
styleUrls: ['./car-chooser.component.css']
})
export class CarChooserComponent {
cars: Car[];
brands: string[];
formBuilder: FormBuilder = new FormBuilder();
colors: string[];
carChooserForm: FormGroup;
car: string[] = undefined;
brandToModelsPipe: BrandToModelsPipe = new BrandToModelsPipe();
brandModelToColorsPipe: BrandModelToColorsPipe = new BrandModelToColorsPipe(); //
constructor(enumPipe: EnumToArrayPipe) {
this.generateCars(10);
this.brands = enumPipe.transform(Brand).map(b => Brand[b]);
this.colors = enumPipe.transform(Color);
this.carChooserForm = this.formBuilder.group({
brand: ['', Validators.required],
model: ['', Validators.required],
color: ['', Validators.required]
});
}
onSubmit(customerData): void {
this.carChooserForm.clearValidators();
this.carChooserForm.reset();
console.warn(customerData);
this.car = customerData;
}
}.colorBox {
all: unset;
display: inline-block;
width: 20px;
height: 20px;
margin: 5px;
border: 1px solid rgba(0, 0, 0, .2);
}<div id="zad5">
<form [formGroup]="carChooserForm" (ngSubmit)="onSubmit(carChooserForm.value)">
<label>
Choose the brand:
<select formControlName="brand">
<option *ngFor="let brand of brands" [value]="brand">{{brand}}</option>
</select>
</label>
<br>
<label>
Choose the model:
<select formControlName="model">
<option *ngFor="let brandModel of carChooserForm.controls['brand'].value | brandToModels : cars"
[value]="brandModel">
{{brandModel[1]}}
</option>
</select>
</label>
<br>
<label>
<div>
Choose the color:
</div>
<input *ngFor="let ourcolor of (carChooserForm.controls['model'].value | brandModelToColors : cars)"
class="colorBox" formControlName="color" name="color" [value]="ourcolor" type="radio"
[style]="'background-color:' + ourcolor">
</label>
<br>
<button type="submit" [disabled]="!carChooserForm.valid">Submit</button>
</form>
<app-car-item *ngIf="car !== undefined" [car]="car">asdsa</app-car-item>
</div>