代码之家 › 专栏 › 技术社区 › A Coder

获取动态控件角度6的选定值

ngfor typescript angular

0

A Coder · 技术社区 · 7 年前

我需要得到下拉列表的选择值,并上传文件细节,在提交按钮点击角度应用程序。

HTML格式:

<div>
    <div *ngFor="let item of controls; let pointIndex=index" [formGroupName]="pointIndex">
      <label>
        Selling Point: <select>
          <option *ngFor="res of objArrValues" [value]="res.value">{{res.name}}</option>
        </select>
      </label>

      <label for="file">Choose File</label>
      <input type="file"
             id="file"
             (change)="handleFileInput($event.target.files, pointIndex)">
             <button type="button" (click)="deleteSellingPoint(pointIndex)">Delete</button>
    </div>
    <button type="button" (click)="getDetails()">Add</button>
  </div>

Typescript(类似于这样):

getDetails()
{
     //something like a array of controls to iterate and get the values

     for(let i=0; i< controls.length; i++)
       {
          obj.id = arr[i].dropdownValue;
          obj.file = arr[i].selectedFile;
       }
}

我试着在两个控件都不起作用的情况下进行更改。是否仍有迭代提交控件并获取值的方法?

1 回复 | 直到 7 年前

1

Ehsan Kiani 7 年前

只需使用ngModel,您不需要这样做就可以获得select值:

<select [(ngModel)]="selectValue">
          <option *ngFor="res of objArrValues" [value]="res.value">{{res.name}}</option>
        </select>

在ts文件中声明一个名为selectValue的变量,也可以对输入执行此操作。

2

0

Suhas Parameshwara 7 年前

您还可以在下面的select语句中使用(change)事件,

<select (change)="onChange($event.target.value)">
  <option *ngFor="let res of objArrValues" [value]="res.value">
     {{res.name}}
  </option>
</select>

在.ts文件中,可以使用onChange func like获取选定的值,

onChange(selectedValue)
{
   //you will get the selected value here
}

3

0

pascalpuetz 7 年前

我想你想要的是formArray的用法。看看这里怎么用 https://alligator.io/angular/reactive-forms-formarray-dynamic-fields/

在您的情况下,大致如下:

电话号码:

@Component(...)
class MyComp {
   public form:FormGroup = this.fb.group({
      someKey: this.fb.array([      // This is the array of controls we iterate over
         this.fb.group({/*...*/}), // Each entry in your array
         this.fb.group({/*...*/})  // And another entry in your array
      ])
   });

   constructor(private fb:FormBuilder) {}

   public getDetails() {
      const formValueAsArray = this.form.get('someKey').value; // Just get the value as a normal array
      // now do what you want with the array
   }

}

模板:

<div>
   <!-- Only changed the following line -->
   <div *ngFor="let item of form.get('someKey').controls; let pointIndex=index" formArrayName="someKey">
   <label>
   Selling Point: <select>
      <option *ngFor="res of objArrValues" [value]="res.value">{{res.name}}</option>
    </select>
  </label>

  <label for="file">Choose File</label>
  <input type="file"
         id="file"
         (change)="handleFileInput($event.target.files, pointIndex)">
         <button type="button" (click)="deleteSellingPoint(pointIndex)">Delete</button>
</div>
<button type="button" (click)="getDetails()">Add</button>