angular - 如何将反应形式值作为对象内的对象

Question

我正在使用一个非常简单的反应式表单，其中包含英语和法语的“名称”和“描述”，一切都很好，但我需要将请求作为对象内部的对象发送如下，我也不知道表单控制器名称应该如何在这里这样验证也应该起作用。代码演示 https://stackblitz.com/edit/angular-reactive-forms-btzhcm?file=app%2Fapp.component.html

要求

{"title":{"fr":"titleFr","en":"New Title"},"description":{"fr":"descriptionFr","en":"New Description"}}

app.component.ts

import { Component, HostListener } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'testproject';
  registerForm: any;
  submitted = false;
  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.registerForm = this.formBuilder.group({
      title: ['', Validators.required],
      description: ['', Validators.required],
    });
  }

  get f() {
    return this.registerForm.controls;
  }
  onSubmit() {
    this.submitted = true;

    // stop here if form is invalid
    if (this.registerForm.invalid) {
      return;
    }

    // display form values on success
    alert(
      'SUCCESS!! :-)\n\n' + JSON.stringify(this.registerForm.value, null, 4)
    );
  }

  onReset() {
    this.submitted = false;
    this.registerForm.reset();
  }
}

app.component.html

<div class="card m-3">
<h5 class="card-header">Angular 10 Reactive Form Validation</h5>
<div class="card-body">
  <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
    <div class="form-row">
      <div class="form-group col">
        <label>Title</label>
        <input type="text" formControlName="title" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.title.errors }" />
        <div *ngIf="submitted && f.title.errors" class="invalid-feedback">
          <div *ngIf="f.title.errors.required">Title is required</div>
        </div>
      </div>
    </div>

    <div class="form-row">
      <div class="form-group col">
        <label>Description</label>
        <input type="text" formControlName="description" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.description.errors }" />
        <div *ngIf="submitted && f.description.errors" class="invalid-feedback">
          <div *ngIf="f.description.errors.required">Description is required</div>
        </div>
      </div>
    </div>

    <div class="text-center">
      <button class="btn btn-primary mr-1">Register</button>
    </div>
  </form>
</div>
</div>

标签： angular