使用 Reactive Forms 从包裹在强制 object 中的字段发送值

Question

我正在尝试使用一个信号 API 从 angular 应用向移动设备发送推送通知。

标题和内容需要 key/value collection 语言。所以在表单中，输入字段正在发布一个字符串，我收到的错误是："headings must be key/value collections by language code"，显然。

我尝试为表单控件创建一个 object，然后将输入字段定义为 this.title 和 this.message，但无法识别表单控件名称。

令人沮丧的是我知道问题出在哪里，但就是不知道正确格式化表单生成器以接受正确值作为潜在值的最佳方法 object，所以类似：

headings: {
    "en" : ['', Validators.required]
},
content : {
    "en" : ['', Validators.required]
}

//component.ts

ngOnInit() {
    this.logo = environment.logo;
    this.appID = environment.one_signal.app_id;
    this.icon = environment.one_signal.icon;
    this.segments = environment.one_signal.included_segments;

    this.alertForm = this.formBuilder.group({
      app_id: [this.appID],
      included_segments: [[this.segments]],
      small_icon: [this.icon],
      headings: ['', Validators.required],
      content: ['', Validators.required]
    })
}

onSubmit() {
    if (this.alertForm.invalid) {
      return (this.submitting = false) 
    } 
    this.loading = true;

    const formData = this.alertForm.value;

    this.oneSignalService.sendNotification(formData)
    .pipe(first())
    .subscribe(
      () => {
        this.loading = false;
      }
    )
}

//表格在component.html

<form 
  [formGroup]="alertForm"
  *ngIf="alertForm"
  (ngSubmit)="onSubmit()">
  <label>Title <span>[Required]</span></label>
  <input 
  type="text" 
  hidden 
  formControlName="app_id" 
  id="app_id">
  <input 
  type="text" 
  formControlName="headings" 
  id="headings">
  <label>Message<span>[Required]</span></label>
  <textarea 
  formControlName="content"
  id="content"></textarea>
  <input class="submit" type="submit" value="Send Alert">
</form>

//这个class

export class OneSignal {
    app_id: string;
    included_segments: [string];
    small_icon: string;
    headings: {
        "en": string;
    };
    contents: {
        "en": string
    };
}

有没有人在过去使用一个信号使用网络应用程序发布到移动设备 apps/devices？如果是这样，他们是如何解决这个问题的？或者您知道为 angular 中的表单构建器格式化 key-value collection 的最佳方法吗？

Answer 1

您不需要按原样从表单发送数据。在将它发送到 sendNotification 方法之前，您可以从中选择您想要的内容。前任：让通知={something1:formData.property1,something2:formData.property2}; this.oneSignalService.sendNotification（通知）；

或者您可以定义一个带有其他属性的打字稿class

使用 Reactive Forms 从包裹在强制 object 中的字段发送值

Using Reactive Forms to send value from field wrapped in compulsory object

onesignal

angular

angular-reactive-forms