如何在 Angular 的 ng 组件中从 ng-slider 获取价值

Posted 2023-03-13

【中文标题】如何在 Angular 的 ng 组件中从 ng-slider 获取价值

【英文标题】：How to take value from ng-slider in ng component in Angular

【发布时间】：2018-07-03 11:30:03

【问题描述】：

我在输入字段中创建了一个滑块。我无法在 formGroup 中获得它的价值。我被卡住了。

我的代码：

<form [formGroup]="Form" novalidate (ngSubmit)="BasicDetail(Form.value)>
    <div class="col-md-8">
       <div class="drags">
         <input class="ex6" type="text" data-slider-min="0" data-slider-max="10" data-slider-step="1" data-slider-value="5"/>
       </div>
    </div>
</form>

需要帮助。

【参考方案1】：

确保输入是滑块类型，表示范围

type="range"

如果您要创建一个提交表单的功能来提供您的表单，那么它是模板驱动的，因此请去掉您的 formGroup 属性，（假设这是您想要的，因为您没有在component.ts 端） 给你的表格一个参考表格

<form #form="ngForm" novalidate (ngSubmit)="BasicDetail(form.value)">

创建一个提交按钮

<button class="btn btn-primary"type="submit"> Submit </button>

确保为表单输入命名，并为其指定 ngModel

如果您还想直接访问，请创建双向绑定，例如使用名为 rangeValue 的变量

[(ngModel)]="rangeValue"

确保您实际使用的是实数范围输入类型，我不知道您从哪里获得数据滑块

 <form #form="ngForm" novalidate (ngSubmit)="BasicDetail(form.value)">
  <div class="col-md-8">
    <div class="drags">
      <input class="ex6"
             type="range"
             min="0" max="10"
             step="1"
             name="someRange"
             [(ngModel)]="rangeValue"
             ngModel/>
    </div>
  </div>
  <button class="btn btn-primary"type="submit"> Submit </button>
</form>

在您的 component.ts 中，声明变量并尝试在提交时记录它

  rangeValue = 5;
  constructor( ) 

  ngOnInit() 
  

  BasicDetail(form: any) 
    console.log(this.rangeValue);
    console.log(form.someRange);
  

【讨论】：

你说输入类型应该是滑块，在你的代码中你把它当作范围.....但它仍然显示为空白

哦，但是当我实现相同时，我发现值变为空白......空白字符串......在 data-slider-value 中，我得到了实际需要的值.. .. 如果我可以使用组件中的表单传递该值.. 是否可能

@Rajkumar，更新了设置默认值、直接访问和表单访问的答案。如果这不起作用，你要么错过了一步，要么做了其他事情，如果不显示你在组件中所做的一切，就很难提供帮助