Question

我正在尝试使用角形材料芯片来创建标签对象阵列。

我发现很难弄清楚如何将这些标记对象推入表单构建器中的数组。

这应该很简单，因为我有一个名为“ selected”的数组，其中包含标签对象，而我只想将其添加到表单构建器中。

这是我的HTML：

<form class="flex col" (ngSubmit)="onSubmit()" [formGroup]="registerForm">
    <mat-form-field class="chip-container">
            <mat-chip-list #chipList>
              <mat-chip *ngFor="let tag of selected" [removable]="removable" (removed)="onRemove(tag)">
                {{tag.Text}}
                <i matChipRemove *ngIf="removable" class="fal fa-times-circle"></i>
              </mat-chip>
              <input placeholder="{{placeholder}}" [matChipInputFor]="chipList"
                [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur"
                (matChipInputTokenEnd)="add($event)" disabled>
            </mat-chip-list>
          </mat-form-field>

<div class="available-chips-container">
        <mat-chip-list *ngIf="!hideAvailable">
          <mat-chip *ngFor="let tag of tags" [selectable]="selectable" (click)="onSelect(tag)">
            {{tag.Text}}
          </mat-chip>
        </mat-chip-list>
        <p class="danger-text" *ngIf="hideAvailable">Great! You have selected the maximum number of tags.</p>
      </div>
</form>

这是我的组件代码：

  hideAvailable: boolean;
  selectable = true;
  removable = true;
  placeholder = 'Select a tag below...';
  selected: ITag[] = [];
  tags: ITag[];

  this.registerForm = this.fb.group({
      Email: new FormControl('', [Validators.required, Validators.email]),
      Password: new FormControl('', Validators.required),
      ConfirmPassword: new FormControl('', Validators.required),
      Firstname: new FormControl('', Validators.required),
      Lastname: new FormControl('', Validators.required),
      DateOfBirth: new FormControl('', Validators.required),
      Tags: this.selected
  });

onSelect(tag: ITag) {
  this.selected.push(tag);
}

onRemove(tag: ITag): void {
  this.tags.push(tag);
}

onSubmit() {
  console.log(this.registerForm.value)
}

当前的问题是，尽管我将标签推入选定的数组中并被很好地推入了事件，但是当使用onSubmit（）提交表单时，registerForm.value Tags数组始终为空。

如果您需要其他代码，请告诉我。

谢谢

Answer 1

您将fb用作FormBuilder。

FormControl是您在“硬方法”中使用的语法。

fb避免了这一点！

docs中的以下示例：

困难的方式：

profileForm = new FormGroup({
  firstName: new FormControl(''),
  lastName: new FormControl(''),
  address: new FormGroup({
    street: new FormControl(''),
    city: new FormControl(''),
    state: new FormControl(''),
    zip: new FormControl('')
  })
});

vs

简便方法：

profileForm = this.fb.group({
  firstName: [''],
  lastName: [''],
  address: this.fb.group({
    street: [''],
    city: [''],
    state: [''],
    zip: ['']
  }),
});

这是一个简单的示例，我在初始化阶段在其中一个Ionic应用程序中调用过。

即您删除了所有new FormControl( ... )

 this.gvarForm = this.fb.group({
          name: ['', Validators.required],
          value: ['', Validators.required],
      });

让我知道重构后是否还有问题。将此位添加到html

{{JSON.stringify(registerForm.value)}}

（只有我仍然不确定标题。

使用形状生成器和角形材料添加对象数组筹码

我假设您有一个动态添加到另一个组件的标签列表。

一些屏幕截图-即使您使用诸如Paint，Preview或扫描的手写UI爬虫之类的粗略内容也可以帮助巩固我的理解。

与此同时，this也可能会有所帮助。

Answer 2

selected似乎只是一个JS数组，而不是FormArray。您需要告诉angular选择的内容是FormArray，然后根据情况将表单控件或表单组推送到该数组中。我想在这种情况下，您需要表单组。因此，在构建表单时声明一个表单数组：

constructor(private fb: FormBuilder) {
  this.registerForm = this.fb.group({
    Email: ['', [Validators.required, Validators.email]],
    // ...
    Tags: this.fb.array([])
  });
}

然后在添加时，将表单组推送到表单数组，为表单数组定义一个吸气剂，以便于在函数和模板中使用。

get tagsArr() {
  return this.registerForm.get('Tags') as FormArray;
}

然后添加和删除：

onSelect(tag: any) {
  /** if you only want formcontrol with a single value use: 
      this.tagsArr.push(tag.Text), else do below
  **/
  this.tagsArr.push(
    this.fb.group({
      Text: tag.Text
      // other props
    })
  )
}

onRemove(index): void {
  this.tagsArr.removeAt(index);
}

然后在模板中，我们迭代formarray并显示表单控件值：

<mat-chip-list #chipList formArrayName="Tags">
  <mat-chip *ngFor="let tag of tagsArr.controls; let i = index" 
                    [removable]="true" (removed)="onRemove(i)" >
    {{tag.get('Text').value}}
    <i matChipRemove *ngIf="removable" class="fal fa-times-circle"></i>
  </mat-chip>
</mat-chip-list>

StackBlitz 示例

使用表单生成器和角形材料芯片添加对象阵列

2 个答案: