我正在使用Angular CLI和Angular Material来制作将数据发布到服务器上的API的表单,我想问两个问题:
在选择列表中,如果用户选择“完整”,则滑块值将固定为最大100%,如果用户选择“可选”,则滑块值将是正常的(最小10%,最大100%)。
在选择列表中,如果用户选择“完整”,则在按下提交时,它将向API发送“ 0”而不是标签“完整”,如果用户选择“可选”,则将向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);
});
}
积分:
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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句