代码之家 › 专栏 › 技术社区 › Devmix

如何从表单中获取FormControlName?

primeng typescript angular

0

Devmix · 技术社区 · 7 年前

p-日历 . 我想买一个在那些领域。简单地说,我想存储 “日历1” 和数组的内部。

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>

4 回复 | 直到 7 年前

1

cyr_x 7 年前

你可以看报纸 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

2

0

Nexeuz 7 年前

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

3

0

inoabrian 7 年前

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

4

0

Prashant Pimpale Dila Gurung 7 年前

如果你愿意,我会这样做的依靠在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)
  }

}