CODEWITHSUNDEEP
htmlangulartypescriptangular-materialangular6
chiarede
chiarede

Reputation: 11

Angular 6 show dropdown dependent selected option

I have two dropdown select option, but I'm struggling update second's selected option based on first one.

HTML

<form novalidate [formGroup]="editModuleForm" (ngSubmit)="onSubmitForm()">

<div align="center">
  <mat-form-field>
    <mat-select placeholder="Select Module" formControlName="moduleControl" required>
      <mat-option *ngFor="let module of modules" [value]="module" (click)="popData()">
        {{ module.title }}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

<div *ngIf="editModuleForm.get('moduleControl').value" align="center">
    <div align="center">
        <mat-form-field>
            <mat-select placeholder="Select Course" formControlName="courseControl">
                <mat-option *ngFor="let course of courses" [value]="course.courseId" >
                    {{ course.name }}
                </mat-option>
            </mat-select>
        </mat-form-field>
    </div>
</div>

Component

constructor(private putService: PutService, private getService: GetService,
          private router: Router, private formBuilder: FormBuilder) {}

ngOnInit() {
this.getService.findAllModule().subscribe(modules => {
  this.modules = modules;
});

this.getService.findAllCourses().subscribe(courses => {
  this.courses = courses;
});

this.editModuleForm = this.formBuilder.group({
  moduleControl: this.formBuilder.control(null),
  courseControl: this.formBuilder.control(null)
});}

popData() {
this.editModuleForm.get('moduleControl').valueChanges.subscribe(
  value => {
    this.editModuleForm.controls['courseControl'].setValue(value.course);
    console.log(value);
  }
);}

After selecting an item in the first dropdown, I would like to default select module's course in the second dropdown and refresh after selecting another one.

Upvotes: 1

Views: 2775

Answers (2)

Aniket Avhad
Aniket Avhad

Reputation: 4145

You need subscribe changes on ngOnInit() no need to call click event

here's an example

ngOnInit() {

    this.editModuleForm = this.formBuilder.group({
      moduleControl: '',
      courseControl: ''
    });

     this.popData();
  }

  popData() {
    this.editModuleForm.controls['moduleControl'].valueChanges.subscribe(
      value => {
        this.editModuleForm.controls['courseControl'].setValue(value.id);
      }
    );
  }

Stackblitz demo

Upvotes: 1

bgraham
bgraham

Reputation: 1997

I think the problem is you are calling this.editModuleForm.get('moduleControl').valueChanges in the click event, you actually want to call that in the ngOnInit. Its starting to listen to the value changes are the value has already changed!

Maybe try this:

constructor(private putService: PutService, private getService: GetService,
          private router: Router, private formBuilder: FormBuilder) {}

ngOnInit() {
this.getService.findAllModule().subscribe(modules => {
  this.modules = modules;
});

this.getService.findAllCourses().subscribe(courses => {
  this.courses = courses;
});

this.editModuleForm = this.formBuilder.group({
  moduleControl: this.formBuilder.control(null),
  courseControl: this.formBuilder.control(null)
});

this.editModuleForm.get('moduleControl').valueChanges.subscribe(
  value => {
    this.editModuleForm.controls['courseControl'].setValue(value.course);
    console.log(value);
  }

}

You can get rid of the click event and the pop() method

Upvotes: 0

Related Questions