[英]Binding selected value to input in angular material
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);
}
);
}
Example: https://stackblitz.com/edit/angular-okhyx6?file=src%2Fapp%2Fselect-disabled-example.html示例: 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.