0

我想创建一个包含两个参数的位置对象。我可以用 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

4

2 回答 2

0

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

要将 object 作为属性，您必须使用 aFormGroup而不是 a 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>

堆栈闪电战

于 2018-03-20T19:03:51.833 回答
0

这是解决方案：

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>

打字稿文件：

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

于 2018-03-21T10:17:24.710 回答