标签: formarray

在我的应用程序中，我使用了反应式表格。在我的应用程序中，它们是一个按钮Add new Fields，单击此按钮后会添加新字段。

我可以添加新字段，但不能分配formControlName。

任何人都可以向我显示正确的路径，如何formControlName向这些动态添加的字段添加内容。

这是为此的Plnkr。

我正在使用Angular Reactive表单，已向FormArray中动态添加了两个FormControl，但是在将它们与formControlName绑定时，却无法在模板中引用这些FormControl。在模板中，我将循环索引变量“ i”分配给formControlName，但它不起作用。通过将控件与formControlName绑定，可以得到“具有路径的窗体控件没有值访问器”。这是我的组件类代码：

export class Control {
  constructor(public controlType?: string, public label?: string, public required?: boolean, public placeholder?: string,
    public options?: string[], public value?: string) { }
}

export class FormComponent implements OnInit {
  reviewForm: FormGroup;

  constructor(public formService: FormService, public dialog: MdDialog) { }


  selectedControl: any = null;
  label: string;

  ngOnInit() {
    this.reviewForm = new FormGroup({
      'controlArray': new FormArray([
      ])
    });
  }

  addControl() {
    const myControl: Control = new Control(this.selectedControl.name, this.label, this.isRequired,
      this.selectedControl.attributes.value, this.selectedControl.attributes.options, 'null');
    var control: FormControl = new …

我正在使用带有 mat 自动完成功能的反应式表单。我在应用程序的其他部分使用了自动完成功能，但我无法弄清楚。我有一个formarray，每次我想在我的情况下添加一个新传感器时都会添加一个输入。自动完成在我的第一个输入中工作正常，但是当我尝试添加更多输入时显示错误：错误：必须在索引处为表单控件提供一个值：1

HTML：

<div class="row">
    <div class="input-field col s10">
      <div class="form-group">
        <div formArrayName="sensors_id">
          <div *ngFor="let sensor of addHomeboxPForm.get('sensors_id')['controls']; let i = index">
            <br>
            <input formControlName="{{i}}" type="text" placeholder="Select Sensor" aria-label="Number" matInput [matAutocomplete]="auto1">
            <mat-autocomplete autoActiveFirstOption #auto1="matAutocomplete" [displayWith]="displayWith" >
              <mat-option (onSelectionChange)="updateForm($event, [sensor.sensors_id], 'sensors_id')" *ngFor="let sensor of filteredOptionsS | async" [value]="sensor.sensor_serial">
                {{sensor.sensor_serial}}
              </mat-option>
            </mat-autocomplete>
            <div class="button-left">
              <button *ngIf="addHomeboxPForm.controls.sensors_id.value.length > 1" type="button" class="fa" (click)="onRemoveItem(i)">RemoveSensor</button>
            </div>
          </div>
        </div>
      </div>


<div class="input-field col s2">
        <button type="button" class="btn" (click)="onAddItem()">AddSensor</button>
      </div>

TS：

格式数组： 'sensors_id': this.fb.array([], Validators.required),

  updateForm(ev: …

我有一个里面FormArray有不同的物品。FormControl我希望能够听到其中任何一个的更改事件。

我尝试这样做：

this.form = this.fb.group({
    items: this.fb.array([this.fb.control('')])
});

(<FormArray>this.form.get('items')).controls.forEach((control: FormControl) => {
    control.valueChanges.subscribe(change => console.log(change));
});

但我似乎从未到达过console.log，即使我确信子控件正在触发更改事件（从ControlValueAccessor界面）。

订阅 a 的子控件的更改的FormArray方式是什么？

我有一个列表，我将其转换为 FormArray 以生成 html 中的按钮列表。我想按名称过滤汽车

汽车组件.html

  <input #searchBox id="search-box" (input)="search(searchBox.value)" />

<form [formGroup]="form" *ngIf="showCars">
              <input type="button" class ="btn"  formArrayName="carsList" *ngFor="let car of carsList$ | async; let i = index" value="{{carsList[i].name}}" >
        </form>

CarComponent.ts

 carsList$: Observable<Car[]>;
  private searchTerms = new Subject<string>();
  search(term: string): void {
    this.searchTerms.next(term);
  }

constructor(private formBuilder:FormBuilder,...)
{
  this.form = this.formBuilder.group({
      carsList: new FormArray([])
    });

this.addButtons();

}

 ngOnInit() {
    this.spinner.show(); 
    this.carsList$ = this.searchTerms.pipe(
      debounceTime(300),
      distinctUntilChanged(),
      switchMap((term:string)=> 
      this.carsList ??? // Is this correct ?? What do I put here ? …

再会。

我寻找了解决方案，即使有一个与我所问的类似的问题，我相信这个问题更独特一些，而不是重复。

这是我的 html 表单：

<div class="form-group col-md-6" formGroupName="schema">
  <div formArrayName="currencies">
    <input type="text" class="form-control" id="percentage" formControlName="percentage" placeholder="Discount %*" required>
  </div>
</div>

这是我的 ts formBuilder。

this.createPromo = this.fb.group({
      type: ['promotion'],
      name: ['', Validators.required],
      description: ['', Validators.required],
      enabled: ['', Validators.required],
      promotion_type: ['', Validators.required],
      start: ['', Validators.required],
      end: ['', Validators.required],
      schema: this.fb.group({
        currencies: this.fb.array([
          this.fb.group({
            percentage: '',
            currency: 'ZAR'
          })
        ])
      }),
    });

所以我希望我的表单作为分组数组提交。然而，控制台中的错误如下Cannot find control with path: 'schema -> currencies -> percentage'，因此percentage即使我输入了一个数字，我也无法将我的表单提交为空。

我有一个动态表单组。

示例用户界面图像

两种垫子选择都是动态的。当我按下添加按钮时，它会添加另一个具有相同元素和相同动态字段的表单数组。

在表单组数组的第一个索引中，当我更改 CATEGORY 列中 mat-select 的值时，它将根据从数据库获取的值填充 JOB 列。

我的问题是，当我添加另一个表单组数组时，mat-select 仍然是动态的，但是当我更改第二行、CATEGORY 列中的 mat-select 的值时，它会更改 JOBS 列中基于的所有行获取第一列中的数据。

HTML 文件

<mat-form-field>
  <mat-select formControlName="categories" 
          (selectionChange)="getJobs($event.value)">
              <mat-option *ngFor="let cat of categories" 
                 [value]="cat.jobCatID">
                {{cat.name}}
              </mat-option>
  </mat-select>
</mat-form-field>
<mat-form-field>
   <mat-select formControlName="jobs">
          <mat-option *ngFor="let job of jobs" [value]="job.jobID">
            {{ job.name}}
          </mat-option>
   </mat-select>
 </mat-form-field>

.TS文件

getJobs(id){
return this.category.getJob(id).subscribe(
  data => {
      if(data.success){
        this.jobs=data.jobsCat.jobs
      }
  }
)}

无论如何，我可以使jobs变量动态化，以便在 ngFor 中为每个 JOBS mat-select 提供具有相同值的不同对象变量？

我有一个动态创建的表，它显示的数据如下：

<table>
  <tr *ngFor="let product of products">
    <td>{{product.name}}</td>
    <td>{{product.description}}</td>
    <td>{{product.value}}</td>
    <!-- BELOW IS WHERE A NEW VALUE WILL BE ENTERED -->
    <td><input type="text" value=""></td>
  </tr>
</table>

我读到处理这个问题的适当方法是使用 FormsArray。但我也读到，使用 FormsArray 的正确方法是获取其控件数组：

<table>
  <tr *ngFor="let product of this.form.get('productCollection').controls; let i = index;"
     [formGroupName]="i">
    <td>{{product.name}}</td>
    <td>{{product.description}}</td>
    <td>{{product.value}}</td>
    <!-- BELOW IS WHERE A NEW VALUE WILL BE ENTERED -->
    <td><input type="text" formControlName="name"></td>
  </tr>
</table>

问题是我无权访问此处的描述值。我还没有找到一种方法将其作为元数据传递给控件，​​以便我可以显示它。

那么问题是，对于这样的事情，哪种方法是正确的？是FormArray吗？它是一个 FormGroup 中的一组 FormControl 吗？或者每个表单控件都需要单独存在吗？我愿意接受有关如何开展这项工作的建议。

大家好，我有一个具有一组角色的 Formarray。在编辑期间，它会动态删除并在该表单数组中添加角色，直到这里一切正常，但是当我提交表单时，它会引发错误并且页面会刷新。

错误：TypeError：无法读取 null 的属性“updateOn”

我还附上了下面的屏幕截图

我想用 FormArray 创建一个可编辑的表格。

为此，我有results在表中呈现的属性。

用 FormArray 数据初始化它的正确方法是什么？

results: Array;
tableForm: FormGroup;

ngOnInit(private fb: FormBuilder) {
  this.tableForm = this.fb.group({
    arrayForm: this.fb.array([])
  });
}