如何从表单中获取 formControlName？

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

如果您只想获取那些 formControl 的值并将它们添加到数组中，您只需这样做：

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

Answer 2

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

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

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

}

如何从表单中获取 formControlName？

How to get formControlNames from form?

typescript

primeng

angular