Binding selected value to input in angular material

Question

I have a select box fed by a database and I want to pass the selected value to the an input. Example: I select a category and the selected value shows up in the "type" field. Is there any way to achieve this?




<form 
fxLayout="row" 
fxLayoutAlign="center center"
fxLayoutGap="10px"
#form="ngForm" 
autocomplete="off" 
(submit)="onSubmit(form)">
  <input type="hidden" name="id" [value]="service.formData.id">


  <mat-form-field appearance="fill">
      <mat-label>Name</mat-label>
      <input 
      matInput
      name="name" 
      #name="ngModel" 
      [(ngModel)]="service.formData.name" 
      class="form-control" 
      placeholder="name"
      required>
  </mat-form-field>

 

  <mat-form-field appearance="fill" i>
    <mat-label>Category</mat-label>
    <input 
    matInput
    name="categoryId" 
    #categoryId="ngModel" 
    ngModel
    [(ngModel)]="service.formData.categoryId" 
    class="form-control" 
    placeholder=""
    required
    >

</mat-form-field>

  

  <mat-form-field appearance="fill">
      <mat-label>Type</mat-label>
      <input 
      matInput
      name="type" 
      #type="ngModel" 
      [(ngModel)]="service.formData.type" 
      class="form-control" 
      placeholder="Type"
      required>
  </mat-form-field>

  <div class="form-group">
      <button class="btn-success btn-lg btn-block" type="submit">Submit</button>
  </div>

</form>

<form 
*ngIf="!isAddingCategory"
fxLayout="row" 
fxLayoutAlign="center center"
fxLayoutGap="10px"
#form="ngForm" 
autocomplete="off" >
<mat-label >Can't find your category?</mat-label>
<div class="form-group">
  <button class="btn-success btn-block" (click)="changeIsAddingCategory()">Add New Category</button>
</div>

</form>


<div>
  <mat-form-field *ngIf="!isAddingCategory" appearance="fill">
    <mat-label>Category</mat-label>
      <mat-select [(ngModel)]="selectedOption" (selectionChange) = updateCategory(event)>
      <mat-option  *ngFor="let category of categories | async " [value]="category.id" >
        {{ category.name }}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

 ngOnInit(): void {
    this.isAddingCategory = false; 
    this.resetForm();
    this.records = this.service.getRecordsForForm();
    this.categories = this.service.getCategories();
    console.log(this.records)

    this.service.categoryFormData = {
      id: 0,
      name: ""
    }
  }



  onSubmit(form: NgForm) {
    console.log(form.value)
    if (this.service.formData.id == 0)
      this.insertRecord(form)
    else 
      this.updateRecord(form)
  }

  insertRecord(form: NgForm) {
    console.log("I'm the inserted object = " + form.value)
    this.service.postRecordDetail().subscribe(
      res => {
        this.resetForm(form);
        this.service.getRecords();
      },
      err => {
        console.log(err);
      }
    );
  }

Bind selectionChange event to a function to update the value. material.angular.io/components/select/api — Frank
– Frank, Commented Nov 14, 2020 at 22:58

Frank · Accepted Answer · 2020-11-14 23:08:34Z

1

Example: https://stackblitz.com/edit/angular-okhyx6?file=src%2Fapp%2Fselect-disabled-example.html

import { Component } from "@angular/core";
import { FormControl } from "@angular/forms";

/** @title Disabled select */
@Component({
  selector: "select-disabled-example",
  templateUrl: "select-disabled-example.html"
})
export class SelectDisabledExample {
  disableSelect = new FormControl(false);

  selectedOption: string = "option1";
  comment: string = "";

  updateType(event: any) {
    this.comment = this.selectedOption;
  }
}

<h4>mat-select</h4>
<mat-form-field appearance="fill">
  <mat-label>Choose an option</mat-label>
  <mat-select [(ngModel)]="selectedOption" (selectionChange)="updateType(event)">
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2">Option 2</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>

  <mat-form-field class="example-full-width">
    <mat-label>Leave a comment</mat-label>
    <textarea [(ngModel)]="comment" matInput placeholder="Ex. It makes me feel..."></textarea>
  </mat-form-field>

answered Nov 14, 2020 at 23:08

Frank

1,28512 silver badges26 bronze badges

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

1 Comment

Pablo Aguirre de Souza Over a year ago

That did it for me mate!

Collectives™ on Stack Overflow

Binding selected value to input in angular material

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related