Question

我有一个表格，有5个字段。有2个字段正在使用 p-calendar 。我想获得这些字段的 formControlName 。简单来说，我想将“ calendar1” 和“ calendar2” 存储在数组中。

let myArray = ["calendar1", "calendar2"]

有人能指出我正确的方向吗？提前非常感谢！

这是我的代码

LIVE DEMO

<form [formGroup]="registrationFormGroup">
  <input formControlName = "username" placeholder = "username"/><br/>
  <input formControlName = "userlastname" placeholder = "userlastname"/><br/>
  <p-calendar  placeholder = "calendar1" formControlName = "calendar1"
hourFormat="24"></p-calendar><br/>
  <input type = "text" formControlName = "hobby" placeholder = "hobby"/><br/>
  <p-calendar placeholder="calendar2" formControlName = "calendar2"></p-calendar>
</form>

Answer 1

您可以读取所有使用的日历组件的ElementRef并通过formControlName从中获取getAttribute()属性。

import { Component, AfterViewInit, ViewChildren, QueryList, ElementRef } from '@angular/core';
import { CalendarModule, Calendar } from 'primeng/primeng';
import { FormBuilder, FormGroup, Validators } from "@angular/forms";


@Component({
  selector: 'app-calendar',
  templateUrl: './calendar.component.html'  
})
export class CalendarComponent implements AfterViewInit
{
  value: Date;

  @ViewChildren(Calendar, { read: ElementRef })
  public calendars: QueryList<ElementRef>;

  public calendarNames: string[] = [];

  constructor(private _fb: FormBuilder) {} 

  registrationFormGroup = this._fb.group({
     username: [''],
     userlastname: [''],
     calendar1:[''],
     hobby: [''],
     calendar2:[''],
   });

   ngAfterViewInit()
   {
      this.calendarNames = this.calendars.map(({ nativeElement }) =>
      {
        return nativeElement.getAttribute('formControlname');
      });
   }
}

live demo

Answer 2

如果只希望获取这些formControl的值并将它们添加到数组中，则只需执行以下操作：

// your component and submit method
submitForm() {    
 this.myArray.push(this.registrationFormGroup.get('calendar1').value);
 this.myArray.push(this.registrationFormGroup.get('calendar2').value);
}

Answer 3

@progx

您可以尝试以下方法，这不是官方的方法，但我提出了解决方案。

如果具有以下模板，则应尝试将其formControlName与ID匹配。

<form [formGroup]="registrationFormGroup">
  <input formControlName = "username" placeholder = "username"/><br/>
  <input formControlName = "userlastname" placeholder = "userlastname"/><br/>
  <p-calendar  id="calendar1" placeholder = "calendar1" formControlName = "calendar1"
hourFormat="24"></p-calendar><br/>
  <input type = "text" formControlName = "hobby" placeholder = "hobby"/><br/>
  <p-calendar id="calendar2" placeholder="calendar2" formControlName = "calendar2"></p-calendar>
</form>

这将允许您查询模板并在组件中执行以下操作。

let calendarFields: Array<string> = [];
let form = document.querySelector('form');

for(let i = 0 ; i < form.childElementCount; i++) {
  let child = form.children[i];
  // check for a form child element with the local name of p-calendar
  if(child.localName == 'p-calendar') {
      // This id will be the same as your formControlName
      calendarFields.push(child.id); 
  }   
}

Answer 4

如果您依赖 FormControl名称，我会以这种方式进行

var controls = Object.keys(this.registrationFormGroup.controls);
var calendarControlNames = controls.filter(x => {
     return x.match(/calendar/);
  })
console.log(calendarControlNames)

TS代码：

import { Component, OnInit } from '@angular/core';
import { CalendarModule } from 'primeng/primeng';
import { FormBuilder, FormGroup, FormControl, Validators } from "@angular/forms";


@Component({
  selector: 'app-calendar',
  templateUrl: './calendar.component.html'
})
export class CalendarComponent implements OnInit {
  value: Date;

  constructor(private _fb: FormBuilder) { }

  registrationFormGroup = this._fb.group({
    username: [''],
    userlastname: [''],
    calendar1: [''],
    hobby: [''],
    calendar2: [''],
  });

  ngOnInit() {
    var controls = Object.keys(this.registrationFormGroup.controls);
    var calendarControlNames = controls.filter(x => {
      return x.match(/calendar/);
    })
    console.log(calendarControlNames)
  }

}

如何从表单获取formControlNames？

4 个答案: