Angular形式：select一个值更新另一个值

Question

我正在使用 Angular CLI 和 Angular Material 制作一个表单，用于将数据发布到服务器上的 API，我想问两个问题：

在选择列表中，如果用户选择"Full"，滑块值将固定为最大值100%，如果用户选择"Optional"，滑块值将正常（最小 10%，最大 100%）。
在选择列表中，如果用户选择"Full"，当他们按下提交时，它会将“0”发送到API而不是标签"Full" , 如果用户选择 "Optional", 它将发送 "1" 到 API 而不是标签 "Optional".

我不知道如何实现上面的这些要求，这里是我使用的代码：

Form.component.html

<form [formGroup]="createItemForm">
    <fieldset>
        <div class="row">
            <div class="col-lg-6">
                <mat-form-field>
                    <mat-select placeholder="Select" formControlName="modeTaker" id="modeTaker">
                        <mat-option *ngFor="let value of modeTakers" value="value">{{ value }}</mat-option>
                    </mat-select>
                </mat-form-field>
            </div>
            <div class="col-lg-6">
                <span>Percent share</span>
                <mat-slider
                    thumbLabel
                    [displayWith]="formatLabel"
                    min="10"
                    max="100"></mat-slider>
            </div>
        </div>
    </fieldset>
    <button mat-raised-button type="submit" (click)="createItems()" class="btn btn-primary pull-right"
    [disabled]="!createItemForm.valid">Create a new items</button>
</form>

Form.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
import { ApiService, NotificationService } from '@app/core';
import { Router } from '@angular/router';


createItemForm: FormGroup;
isSubmitting = false;
modeTakers = ['Full', 'Optional'];

constructor(
    private formBuilder: FormBuilder,
    private apiService: ApiService,
    private ns: NotificationService,
    private router: Router
) {
    this.createItemForm= this.formBuilder.group({
      'sharedPercent': [''],
      'modeTaker': ['']
    });
}

formatLabel(value: number) {
    if (value <= 100) {
      return Math.round(value) + '%';
    }
    return value;
}

createItems() {
    const item = Object.assign({}, this.createItemForm.value);
    this.isSubmitting = true;

    this.apiService.post('/itemslist/', item )
    .subscribe(({ name, id }) => {
      this.ns.showNotification(`New ${name} created`);
      this.router.navigate(['/itemslist', id]);
    },
    (error) => {
      this.ns.errorNotification(error);
    });
}

Answer 1

获得积分：

1) 您可以使用 value、min 和 max 属性动态绑定值：

HTML:

<mat-slider thumbLabel [displayWith]="formatLabel" [value]="sliderValue" [min]="minValue" [max]="maxValue"></mat-slider>

2) 将您的 JSON 更改为：

[{ text:"Full", value:"0"},{ text:"Optional", value:"1"}]

和HTML：

<mat-form-field>
    <mat-select placeholder="Select" id="modeTaker">
        <mat-option *ngFor="let obj of modeTakers" [value]="obj.value" (click)="onchange(obj)">{{ obj.text }}
        </mat-option>
    </mat-select>
</mat-form-field>

Component.TS代码：

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

@Component({
  selector: "slider-overview-example",
  templateUrl: "slider-overview-example.html",
  styleUrls: ["slider-overview-example.css"]
})
export class SliderOverviewExample {
  maxValue: any;
  minValue: any;
  sliderValue: any;
  modeTakers = [{ text: "Full", value: "0" }, { text: "Optional", value: "1" }];

  onchange(obj: any) {
    if (obj.value == 0) {
      this.sliderValue = 100;
      this.minValue = 10;
      this.maxValue = 100;
    } else {
      this.sliderValue = 50;
      this.minValue = 10;
      this.maxValue = 100;
    }
  }
}

HTML 标记：

<mat-form-field>
    <mat-select placeholder="Select" id="modeTaker">
        <mat-option *ngFor="let obj of modeTakers" [value]="obj.value" (click)="onchange(obj)">{{ obj.text }}
        </mat-option>
    </mat-select>
</mat-form-field>
<mat-slider thumbLabel [displayWith]="formatLabel" [value]="sliderValue" [min]="minValue" [max]="maxValue"></mat-slider>

Online Demo

Answer 2

您将处理下拉列表的更改事件，如果下拉列表的值为0，则将滑块的值设置为100。当值不为0时，我们启用滑块。语法将为 [disabled]="true or false".

2.You 应该改变你的 modeTakers = [{key: 0, label: 'Full'}, {key: 2, label: 'Optional'}], 值将是 modeTakers.key 文本将是 modeTakers.label

示例如下：https://stackblitz.com/edit/angular-vpa1nw

Angular形式：select一个值更新另一个值

Angular Form: select a value to update another value

http-post

typescript

angular-material

angular