I am trying to install the element mat-select but I am not sure how to do it properly. according to angular I need to set it up using the following approach ::

angular docs:: https://material.angular.io/components/select/overview

/** @title Select with multiple selection */
@Component({
  selector: 'select-multiple-example',
  templateUrl: 'select-multiple-example.html',
})
export class SelectMultipleExample {
  toppings = new FormControl('');
  toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
}

here is the my HTML component

<mat-card>
    <mat-spinner *ngIf="isLoading"></mat-spinner>
    <form [formGroup]="form" (submit)="onSavePost()" *ngIf="!isLoading">
 



<!-- element i am trying to install -->
      <mat-form-field appearance="fill">
        <mat-label>Toppings</mat-label>
        <mat-select [formControl]="jobTypes" multiple>
          <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
        </mat-select>
      </mat-form-field>
      <!-- element i am tryin to install -->
    

   
    </form>
  </mat-card>
  

this is what my component looks like... please see the comment I added

@Component({
  selector: "app-job-create",
  templateUrl: "./job-create.component.html",
  styleUrls: ["./job-create.component.css"],
})
export class JobCreateComponent implements OnInit, OnDestroy {
  enteredTitle = "";
  enteredContent = "";
  job: Job;
  isLoading = false;
  form: FormGroup;
  imagePreview: string;

  private mode = "create";
  private postId: string;
  private authStatusSub: Subscription;
  jobTypes = new FormControl(''); // how do i install this properly? if I comment out this whole line, i get an error
  toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];

  constructor(
    public jobsService: JobsService,
    public route: ActivatedRoute,
    private authService: AuthService
  ) {}


  ngOnInit() {

    this.form = new FormGroup({
     // jobTypes: this.jobTypes,  // this line works, but I feel there is a better way of doing this
      jobTypes: new FormControl(''), // i wan to use this line, but it does not work when i try to print the content of the form later on
      content: new FormControl(null, { validators: [Validators.required] }),
      image: new FormControl(null, {
        validators: [Validators.required],
        asyncValidators: [mimeType],
      }),
    });
    this.route.paramMap.subscribe((paramMap: ParamMap) => {
      if (paramMap.has("postId")) {
        this.mode = "edit";
        this.postId = paramMap.get("postId");
        this.isLoading = true;
        this.jobsService.getJob(this.postId).subscribe((postData) => {
          this.isLoading = false;
          this.job = {
            id: postData._id,
            content: postData.content,
            imagePath: postData.imagePath,
            creator: postData.creator,
            state: "new",
            substate: "new",
          };
          this.form.setValue({
            content: this.job.content,
            image: this.job.imagePath,
          });
        });
      } else {
        this.mode = "create";
        this.postId = null;
      }
    });
  }



  onSavePost() {
    console.log("onSavePost");
    if (this.form.invalid) {
      console.log("form is not valid!");
      return; 
    }
    this.isLoading = true;
    if (this.mode === "create") {
      console.log("on create");

      console.log("this.form.value:  " JSON.stringify(this.form.value)); /// i dont see the selected values here
      this.jobsService.addJob(this.form.value.content, this.form.value.image);
    } else {
      console.log("onSavePost():: on update");
      console.log()
      this.jobsService.updateJob(
        this.postId,
        this.form.value.title,
        this.form.value.content,
        this.form.value.image,
        this.form.value.state,
        this.form.value.substate,
      );
    }
    this.form.reset();
  }

  ngOnDestroy() {
    this.authStatusSub.unsubscribe();
  }
}

Is there anyway to not declare jobTypes outside of ngInit()?

CodePudding user response：

Since you are using FormGroup which contains the jobTypes form control, use the formControlName attribute.

<form [formGroup]="form" (submit)="onSavePost()" *ngIf="!isLoading">
 
  <mat-form-field appearance="fill">
    <mat-label>Toppings</mat-label>
    <mat-select formControlName="jobTypes" multiple>
      <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
    </mat-select>
  </mat-form-field>
 
</form>

this.form = new FormGroup({
  jobTypes: new FormControl(''), 
  ...
});