如何在 Angular 中动态更改输入标签？

Question

我有两个输入的表单。 第一个是“选择”，第二个是“输入”。

我使用 Angular，我想要做的是第二个输入的文本标签会根据我在第一个输入上的选择而变化。

Answer 1

您可以使用 ngModel 从“选择”绑定您的选择，并通过绑定将其显示在输入中。

假设我们有以下选择和输入如下：

<select type="number" [(ngModel)]="selectedLevel">
      <option *ngFor="let level of levels" [ngValue]="level">{{level}}</option>
    </select>
<input value="{{selectedLevel}}">

并在您的 ts 文件中：

  levels = ["AA", "BB"];
  selectedLevel = this.levels[0];

正如您在上面看到的，级别将用于使用 ngFor 添加下拉列表的值。

selectedLevel 将用于初始化下拉列表的第一个选定值和使用角度绑定的输入元素。

闪电战

Answer 2

你可以在这里看到代码： https : //stackblitz.com/edit/angular-ivy-rvspsy?file=src/app/app.component.ts

我想要的是“评论”文本标签根据我在第一个输入中选择的内容而变化。

 <form [formGroup]="orderForm" (ngSubmit)="makeOrder()"> <label for="order_type">Type</label>&nbsp; <select formControlName="order_type" id="order_type" placeholder="Type" (change)="changes()"> <option value="">Choose</option> <option *ngFor="let orderType of orderTypes" [value]="orderType"> {{ orderType }} </option> </select> <br /><br /> <label for="comment">Comment</label>&nbsp; <input type="text" formControlName="comment" id="comment" placeholder="Comment" autocomplete="off"> </form>

 orderForm: FormGroup; orderTypes = ["Buy", "Sell"]; constructor(private fb: FormBuilder) {} ngOnInit(): void { this.orderForm = this.fb.group({ order_type: [""], comment: [""] }); } changes(): void {} makeOrder(): void { const form = this.orderForm.value; console.log(form); }