javascript 角React形式|使用值而不是formControlName绑定

wwodge7n 于 2023-02-11 发布在 Java

关注(0)|答案(1)|浏览(127)

我有一个带有表单数组的React式表单（tipsAndTricksfield）：

updatePoiForm = this.fb.group({
    name: ['', [Validators.required, Validators.maxLength(75)]],
    tipsAndTricks: this.fb.array([this.fb.control('', [Validators.minLength(25), Validators.maxLength(2000)])]),
  }, { updateOn: 'submit' }
)

在ngOnInit中，我将所有默认值添加到tipsAndTricks数组中：

ngOnInit() {
  ...
  formValues?.tipsAndTricks?.forEach((tipAndTrick) => {
    this.tipsAndTricks.push(this.fb.control(tipAndTrick.id, [Validators.required, Validators.minLength(25), Validators.maxLength(2000)]))
  })
  ...
}

然后在模板中我有一个自定义控件值textarea：

<div class="container__all-fields" formArrayName="tipsAndTricks">
  <div class="container__field" *ngFor="let tipAndTrick of tipsAndTricks.controls; let i = index; let last = last">
    <custom-textarea [formControlName]="i"></custom-textarea>
  </div>
</div>

以下是提示和技巧的类型：

export interface tipsAndTricksResponse {
  id: string
  tip: string
}

正如你所看到的，我只把tip字段传递到我的自定义文本区，而且我的自定义文本区保持这种状态是有道理的：它接收字符串并发出字符串。
但问题是，当我提交表单时，我想发送tip，但也发送id。
所以我的问题是：有没有一种方法可以将一个值绑定到一个表单控件（在表单数组中），即使它已经与formControlName绑定了（这样我就可以只将tip发送到我的自定义文本区域，但在我的表单控件中仍然有tipsAndTricksResponse）？

JavaScript

来源：https://stackoverflow.com/questions/75393670/angular-reactive-form-binding-with-value-instead-of-formcontrolname

1条答案

按热度按时间

laik7k3q1#

据我所知，您有一个tipsAndTricksResponse数组，并且希望有一个可以更改此数组的“tip”属性的窗体。
在updatePoiForm中，您有一个FormControl的FormArray：tipsAndTricks
因此，在submit中，您可以使用map将值数组（“tips”）转换为带有“id”和“tip”的对象数组

submit(form:FormGroup)
{
  const data=form.value.updatePoiForm.map((x:string,index:number)=>(
            {
              id:this.tipsAndTricksResponse[index].id,
              ip:x
            }
  ))
}

注意：您应该声明formArray为“empty”，否则您的formArray中还有一个元素。

updatePoiForm = this.fb.group({
    name: ['', [Validators.required, Validators.maxLength(75)]],
    tipsAndTricks: this.fb.array([]), //<--see that simply use []
  }, { updateOn: 'submit' }
)

赞(0）回复(0）举报 2023-02-11

我来回答

javascript 角React形式|使用值而不是formControlName绑定

1条答案

相关问题

热门标签

最新问答