Angular Form：选择一个值来更新另一个值

Question

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

1. 在选择列表中，如果用户选择“Full”，则滑块值将固定为最大 100%，如果用户选择“Optional”，则滑块值将正常（最小 10%，最大 100% )。

2. 在选择列表中，如果用户选择“Full”，当他们按下提交时，它将向API发送“0”而不是标签“Full”，如果用户选择“Optional”，它将发送API 中的“1”不是标签“可选”。

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

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

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

2.您应该更改您的 modeTakers = [{key: 0, label: 'Full'}, {key: 2, label: 'Optional'}]，值将是 modeTakers.key，文本将是 modeTakers。标签

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