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

Question

我在输入字段中创建了一个滑块。我无法在 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>

需要帮助。

Answer 1

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

   type="range"

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

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

3. 创建一个提交按钮

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

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

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

   [(ngModel)]="rangeValue"

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

 <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>

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

  rangeValue = 5;
  constructor( ) {}

  ngOnInit() {
  }

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