标签: formarray

页面最初是作为模板驱动的表单编写的,但正在转换为被动,以便添加自动保存功能.

在页面组件的构造函数中,我定义了响应式表单变量:

 this.form = fb.group({
    reviewer: '',
    position: '',
    officeName: '',
    rows: fb.array([]),
    comments1: '',
    comments2: '',
    comments3: ''
});

'rows'是与此问题相关的字段.

在ngInit中,通过web api发出请求以检索持久化的表单数据.数据作为行数组检索,每行包含6个单元格的数组.第三个单元格将绑定到FormControl,其他单元格将呈现为静态文本.

this.rows = summaryReportQuestion.map(summaryReportQuestionObj => {
    return {
        cells: [
            summaryReportQuestionObj.questionID,
            summaryReportQuestionObj.question,
            (summaryReportQuestionObj.columnSign == '$' ? (summaryReportQuestionObj.columnSign + ' ' + summaryReportQuestionObj.target) : summaryReportQuestionObj.target + ' ' + summaryReportQuestionObj.columnSign),
            (summaryReportQuestionObj.budget == null ? summaryReportQuestionObj.budget : (summaryReportQuestionObj.columnSign == '$' ? summaryReportQuestionObj.columnSign + ' ' + this.utilityService.formatNumberWithCommas(Math.floor(summaryReportQuestionObj.budget), false) : summaryReportQuestionObj.budget + ' ' + summaryReportQuestionObj.columnSign)),
            (summaryReportQuestionObj.average == null ? summaryReportQuestionObj.average …

我有一个带有 FromGroup 和 FormArray 的动态表单。动态表单运行良好，我可以添加新元素等。另一方面，我在表单中默认加载对象列表时遇到问题。例如，如果我有一个包含两个对象的列表，我希望有两个包含其两个对象数据的表单......我在这里有一个关于 stackblitz 的例子： https://stackblitz.com/edit/angular-4crhvw

PS：在我的示例 stakblitz 中，我制作了显示元素的示例，但我想显示所有元素

将我想发布的内容作为附件查看

编辑 1：

我修改了我的问题以澄清我的需要。

我有一个FormGroup包含FormControl.

其中FormControl，有一个接收数组值。

我正在寻找的是，是否有一种解决方案可以使FormControl接收数组值而不是接收逗号分隔的字符串值（不带括号[]）中的值。

我得到了什么：（数组值）

我想要什么：（字符串值用逗号分隔，没有brackets[]）

叉子的链接：这里

• 预先感谢您的帮助

原始问题：

我想将从 a 接收到的数据转换为FormArray带有逗号的字符串。

我设法在 Console.log 中做到了这一点，但我不知道如何将转换后的数据发送到FormGroup.

我的 TS 文件：

  accessoire: string;
  this.demandeDevis = this.formBuilder.group({
    accessoires: new FormArray([]),
    accessoire: this.accessoire,
  });

  onCheckboxChange(event) {
    const checkAcs: FormArray = this.demandeDevis.get(
      'accessoires'
    ) as FormArray;
    
    if (event.target.checked) {
      checkAcs.push(new FormControl(event.target.value));
      console.log(checkAcs.value.toString());
      this.accessoire = checkAcs.value.toString();
    } else {
      let i: number = 0;
      checkAcs.controls.forEach((item: FormControl) => { …

全部，

我很难让 FormArray 与我当前的应用程序一起工作。我正在尝试从服务中获取姓名并将其添加到预订表单中（并赋予用户添加/删除/修改姓名的能力）

这是相关代码：

reservationForm: FormGroup;
attendeeArray: FormArray;

constructor(
  private groupMeetingService: GroupMeetingsService,
  private formBuilder: FormBuilder
) {}

ngOnInit() {
  this.initialize();
}

private createAttendeeName(name: string): FormControl {
  return this.formBuilder.control({
    name: name
  });
}

private initialize(): void {
  this.attendeeArray = this.formBuilder.array([]);
  this.reservationForm = this.formBuilder.group({
    attendeeRadio: ['inPerson'],
    attendeeName: this.attendeeArray,
  });

  this.groupMeetingService.getMeeting(this.meeting.id).subscribe(meeting => 
  {
    this.meetingLocation = meeting.location;
  });
  this.groupMeetingService
    .getReservations(this.meeting.id)
    .subscribe(data => {
      this.reservations = data;
      this.attendeeArray = this.getAttendeeNames();
      data.attendees.forEach(attendee => {
        this.attendeeArray.push(this.createAttendeeName(attendee.name));
      });
      console.log('array', this.reservationForm);
  });
}

当我查看控制台时，它确实显示它正在被添加。上面的代码正确吗？

如果它是正确的，我如何在 HTML 中循环它并让它显示？

我尝试了很多东西但没有运气:-( …

表单组

this.locationForm = this.formBuilder.group({
          locationName: new FormControl(null, Validators.required),
          locationURL: new FormControl(null, Validators.required),
          workTiming: this.formBuilder.array([
            this.formBuilder.group({
              beginTime: new FormControl(null,Validators.required),
            })
          ])
        })

HTML代码：

<div formArrayName="workTiming" >
         <div *ngFor="let item of workTiming.controls;                  
                      let pointIndex=index" [formGroupName]="pointIndex">
            <div class="container">
            <mat-form-field class="responsive">
                <input type="time" required formControlName="beginTime" matInput placeholder="Begin Time">
                <mat-error *ngIf="workTiming.get('beginTime').hasError('required')"> Enter begin time </mat-error>
            </mat-form-field>
          </div>
      </div>
    </div>

我需要一些关于如何访问 mat-error 中“beginTime”的 formControl 名称的帮助，因为我使用的是 formArray，我不确定如何访问它。如果我在代码中给出这样的错误，我会收到如下错误

ERROR TypeError: Cannot read property 'hasError' of null

• 我需要使用 Angular 创建一个基于简单的二维数组数组的表格形式。
• 数据结构很简单，但单元格中的数据是相互依赖的。单个单元格仅通过索引访问，例如row:1，，col:0。
• 需要在单元格级别定义自定义验证器。此外，可能还有行和列的验证器。

我尝试了各种方法来定义FormArray保存 s 数组FormControl。但我不确定如何FormControl在 Angular 模板中单独访问各自的行索引和列索引。

模型

[
  ['a', 'b'],
  ['c', 'd']
]

表格组

  form = new FormGroup({
    rows: new FormArray([...])
  });

预期结果

我尝试过各种类似的事情：

  <form [formGroup]="form"">
    <div formArrayName="rows">
      <div 
        *ngFor="let row of rows.controls; let rowIndex = index" [formGroupName]="rowIndex">
        <div formArrayName="cols">
          <div
            *ngFor="let col of form.get('cols').controls; let colIndex = index"
            [formGroupName]="colIndex">
            <input [formControlName]="colIndex" />
          </div>
        </div>
      </div>
    </div>
  </form>

我有几个表单数组，需要进行验证，以便每个表单行中的特定字段在所有表单数组中必须是唯一的。如果任何值出现多次，则两个表单字段都必须标记为红色。

我设法编写了一个函数，以便如果这些字段有任何更改，该函数将返回 true/false。但我不确定如何将其用于实际验证过程。

组件.html：

<div formArrayName="temperatureFormArr">
  <div class="row" *ngFor="let temperature of parentForm['controls'].detailForm['controls'].temperatureFormArr['controls']; let i=index"
    [formGroupName]="i">
    <div class="col-4">
      <mat-form-field appearance="outline" class="fex-input">
          <mat-label>Higher Level Function</mat-label>
        <input autocomplete = "off" matInput placeholder="Higher Level Function" (input)="testFunction(i, 'temperatureFormArr')" formControlName="higherLevelFunction">
      </mat-form-field>
    </div>
    <div class="col-6">
      <mat-form-field appearance="outline" class="fex-input">
          <mat-label>Description</mat-label>
        <input autocomplete = "off" matInput placeholder="Description" formControlName="description">
      </mat-form-field>
    </div>
  </div>
</div>

<div formArrayName="waterPressureFormArr">
  <div class="row" *ngFor="let waterPressure of parentForm['controls'].detailForm['controls'].waterPressureFormArr['controls']; let i=index"
    [formGroupName]="i">
    <div class="col-4">
      <mat-form-field appearance="outline" class="fex-input">
          <mat-label>Higher Level Function</mat-label>
        <input autocomplete = "off" matInput placeholder="Higher Level Function" …

您好，我从 API 命中获取对象数组，该对象数组必须分配给 formGroup。我尝试过使用 formGroup 绑定，但它检测到真/假值，但它不会给我对象数组中更改的真/假值，而是只给我真/假，而且我在另一个数组中也有日期输入字段，它也不会检测真/假值或更改的值。如果我写的代码是错误的，那么请纠正我并帮助我以有效的方式编写。

帮助表示赞赏。

演示：演示

TS：

 private settingsInfoForm() {
    if (!this.agentDetailsList) {
      // Add
      this.agentSettingsInfoForm = this.FB.group({
        agentToogles: this.FB.array(this.detailsToggle.map(x=> x.boolValue)),
        restrictionsInfo:this.FB.array(this.Restrictions.map(x=>x.boolValue))
      });
    } else {
      // Edit
      if (this.agentDetailsList) {
       this.detailsToggle = this.agentDetailsList
       this.agentSettingsInfoForm = this.FB.group({
          agentToogles: this.FB.array(this.detailsToggle.map(x=>x.boolValue)),
           restrictionsInfo:this.FB.array(this.Restrictions.map(x=>x.boolValue))
      })
      }
      this.agentSettingsInfoForm.valueChanges.subscribe(data => {
          this.formEdit = true;
          console.log('agentSettingsInfoForm', this.formEdit)
        })
      }
    }

HTML：

<form [formGroup]= "agentSettingsInfoForm">
<div class="row row-cols-2" formGroupName="agentToogles">
              <div class="col" *ngFor="let toggleValue of detailsToggle;let i = index">
                <div class="custom-control custom-switch mb-3">
                    <input type="checkbox" [formControlName]="i" …

我继承了一个正在调试的角度代码文件。当我记录需要评估的 FormArray 时，它会记录为两种类型的 FormArray 控件之一：[FormControl] 或 [FormGroup]。

这是我正在记录的函数的一部分：

  someFunction(data: any, useForm: any = false): any {
   const form = useForm || <FormGroup>this.formGroup;

   forEach(data, (value, key) => {
    // Check nested FormArray items that include FormControls (Would likely be from mat-table).
   const formArray = (<FormGroup>form).get(String(key));
   console.log('formArray > ', formArray);

   if (isArray(value) && formArray.hasOwnProperty('controls') && [HELP]) 

在一个用例中，当加载包含表单控件的 mat-table 时，我会在日志中看到以下内容：

在另一个用例中，例如具有多个选项的复选框控件，我得到以下结果：

我需要弄清楚如何过滤最后一行代码，即 IF 语句的 [HELP] 条件，以便它仅匹配 FormArray 的控件属性包含 [FormGroup] 而不是 [FormControl] 的条件

我应该如何声明这个类型？

假设我有一个FormGroup

1. 我在构造函数中实例化它。

export interface MyType {
 myValue: string
}

myForm: FormGroup
myArray: FormArray // <FormControl<MyType>>

constructor(private _formBuilder: FormBuilder) {
  myForm = new FormGroup({
    myArray: this._formBuilder.array([])
  })
}

2. 因为我在某个地方有一个按钮可以让我向数组添加新元素，所以我执行以下操作

addElement() {
  this.myArray = this.myForm.get('myArray') as unknown as FormArray

  this.myArray.push(this.newElement())
}

private _newElement(): FormGroup { // What type to use ? 
  return this._formBuilder.group({
     myValue: ''
  })
}

但是当我使用

myArray: FormArray<FormControl<MyType>>

我收到以下错误

Argument of type 'FormGroup<any>' is not assignable to parameter of type 'FormControl<MyType>'.
  Type 'FormGroup<any>' is missing the following properties …