Question

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

在选择列表中，如果用户选择“ Full”，则滑块值将固定为最大100％，如果用户选择“ Optional”，则滑块值将是正常的（最小10％，最大100％）。
在选择列表中，如果用户选择“完整”，则按提交时，它将向API发送“ 0”而不是标签“完整”，如果用户选择“可选”，则将发送API的“ 1”而不是标签“ 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

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

2。您应更改modeTakers = [{{key：0，label：'Full'}，{key：2，label：'Optional'}]]，值将为modeTakers.key，文本将为modeTakers。标签

这里是示例：https://stackblitz.com/edit/angular-vpa1nw

角度形式：选择一个值以更新另一个值

2 个答案: