创建属性个具有表单的对象，Angular 5

Question

我想为其中包含两个参数的位置创建一个对象。我可以用 FormGroup 创建一个数组或字符串，但我不知道如何创建一个内部有两个参数的对象。这是我使用的代码：

bucketForm: FormGroup; // at the top of the class component

ngOnInit() {
    this.initForm();
  }

private initForm() {
    let bucketName = '';
    let bucketLocation = {};
    let bucketObjects = new FormArray([]);

    this.bucketForm = new FormGroup({
      'name': new FormControl(bucketName, Validators.required),
      'location': // Here I want to create Location Object with two parameters {id: 'Some random number', name: 'New York'},
      'bucketObjects': bucketObjects
    });
    console.log(this.bucketForm);
  }

我得到了组件的值形式 .html 文件，我这里有一个简单的形式，它是我正在使用的完整代码：

<form [formGroup]="bucketForm" (ngSubmit)="onSubmit()">
    <div class="row">
      <div class="col-md-6">
        <label for="name">Bucket Name*</label>
        <input
          type="text"
          class="form-control"
          id="name"
          formControlName="name">
      </div>
      <div class="col-md-6">
        <label for="bucketLocation">Bucket Location*</label>
        <select
          class="custom-select d-block w-100"
          id="bucketLocation"
          formControlName="location">
          <option
            *ngFor="let locationEl of locations" [value]="locationEl.name">{{ locationEl.name }}
          </option>
        </select>
      </div>
    </div>
    <hr>
    <button
      type="submit"
      class="btn btn-primary"
      [disabled]="!bucketForm.valid">Create Bucket
    </button>
    <button class="btn btn-danger">Cancel</button>
  </form>

这是我的桶模型，我使用的是桶数组：

Bucket {
    id: "BucketExample", // string
    name: "BucketExample", // string
    location: Location, // object { id: string, name: string }
    bucketObjects: Array(0)
}

截图：https://d2ffutrenqvap3.cloudfront.net/items/071z2l0Y3N3a2P25463O/print-scr-bucket.jpg

Answer 1

您正在尝试将对象设置为表单属性之一的值。

要将对象设为属性，您必须使用 FormGroup 而不是 FormControl。

你可以在另一个 FormGroup 中有一个 FormGroup，所以你的 bucketForm 应该是，

this.bucketForm = new FormGroup({
  'name': new FormControl(bucketName, Validators.required),
  'location': new FormGroup({
      id: new FormControl(Math.random()),
      name: new FormControl('')
  }),
  'bucketObjects': bucketObjects
});

并且要将 select 控件的值设置为对象而不是原始值，您必须使用 ngValue

由于我们要直接设置一个对象，提供表单控件对象作为输入，而不是提供 formControlName 属性。

i,e 而不是

formControlName="location"

使用

[formControl]="bucketForm.get('location')"

所以你的 HTML 应该看起来像这样，

<select class="custom-select d-block w-100" id="bucketLocation" [formControl]="bucketForm.get('location')">
   <option
     *ngFor="let locationEl of locations" [ngValue]="locationEl">{{ locationEl.name }}
   </option>
</select>

Stackblitz

Answer 2

解决方法如下：

HTML 文件:

<select class="custom-select d-block w-100"
                id="bucketLocation"
                formControlName="location"
                ngModel>
          <option value="" disabled>Choose...</option>
          <option
            *ngFor="let locationEl of locations" [ngValue]="locationEl">{{ locationEl.name }}
          </option>
        </select>

TypeScript 文件：

private initForm() {
    let bucketName = '';
    let bucketLocation = {};
    let bucketObjects = new FormArray([]);

    this.bucketForm = new FormGroup({
      'name': new FormControl(bucketName, Validators.required),
      'location': new FormControl(bucketLocation, Validators.required),
      'bucketObjects': bucketObjects
    });

}

我在这里从示例中找到了解决方案： Angular API doc

也感谢@cyberpirate92

创建属性个具有表单的对象，Angular 5

Create property of object with form, Angular 5

forms

typescript

angular

formgroups

Stackblitz

创建 属性 个具有表单的对象，Angular 5

Create property of object with form, Angular 5

forms

typescript

angular

formgroups

Stackblitz

创建属性个具有表单的对象，Angular 5