帶數組的角2/4反應形式

Question

我正在嘗試創建我的第一個Angular 2應用程序。 和往常一樣，我立即想創建的模型遇到麻煩。 我有一個用於在關節之間創建父子關系的模型。 例如：我想在我的購物籃中添加帶有一些子對象的文章，如下所示：

IArticle[] = [
{
    id: 1,
    parentArticle: 1234596,
    description: 'some description for parent'
    children: [
        {
            id: 1,
            childArticle: 123457,
            childDescription: 'some description for first child'
        },
        {
            id: 2,
            childArticle: 123467,
            childDescription: 'some description for second child'
        },
        .....
    ]

在打字稿中，我為文章定義了一個接口。 子對象具有其自己的接口，該接口略有不同。

因為這些子對象是固定的小集合，所以我想使用下拉列表添加這些子對象。 我希望這些對象在單擊時顯示為帶有按鈕的按鈕（帶有“您確定”問題的模式彈出窗口是可選的）。 所以我認為dropdownlist旁邊的按鈕應該將dropdownlist值添加到數組中。 當我將值添加到普通類型數組中時，此方法工作正常。 但是現在我想將此數組包裝為“反應形式”。

有人可以幫助我如何在這些反應性表單中使用數組以及如何將它們包裝在formcontrol對象中。 我看着FormArray的“控件”，但不確定這是我要搜索的內容。 它縫制了一個FormControls數組，而不是一個數據數組。 也許Reactive Forms是不正確的決定？ 希望有人可以讓我走上正確的道路。

我的html模板如下（從代碼中剝離了引導代碼）

<form autocomplete="off">
      <input type="text" Placeholder="Article Number" />
    <div >
      <button *ngFor="let child of children">
        <span class="glyphicon glyphicon-remove-circle text-danger"></span>
        {{ child.childArticle }}
      </button>
    </div>
    <div >
        <select class="form-control inline">
          <option value="">Select Service..</option>
          <option *ngFor="let serviceOption of serviceOptions" [ngValue]="serviceOption.serviceNumber">
              {{serviceOption.serviceDescription}} 
          </option>
        </select>
          <button  (click)="onAddService()">
             Add
          </button>
    </div>
    <div>
      <button type="submit">
         Save
      </button>
    </div>
  </form>

親切的問候。

------打字稿代碼：

export class NewServiceComponent implements OnInit {
  newServiceForm: FormGroup;
  serviceOptions: IServiceArticle[] = [
     { 'id': 1, 'serviceNumber': 123456, serviceDescription: 'description 1' },
     { 'id': 2, 'serviceNumber': 456789, serviceDescription: 'description 2' },
     { 'id': 3, 'serviceNumber': 123456, serviceDescription: 'description 3' },
];
selectedServiceOption: IServiceArticle;
newArticle: IService;

constructor(private _fb: FormBuilder) {
}

createForm() {
 this.newServiceForm = this._fb.group({
   services: this._fb.array([]),
   articleNumber: this._fb.control(null, Validators.required),
 })
}

ngOnInit() {
  this.createForm();
}

onAddService() {
  const arrayControl = <FormArray>this.newServiceForm.controls['services'];
  let newgroup = this._fb.group({
    serviceNumber: this.selectedServiceOption.serviceNumber,
    serviceDescription: this.selectedServiceOption.serviceDescription,
  })
  arrayControl.push(newgroup);
}
}

Answer 1

創建反應式表單時，首先需要具有主表單組，並且在表單組中將具有formArray控件。 完成之后，您將向該formArray添加任何現有子項，並且這些子項中的每一個將是其自己的formGroup。

constructor(private fb: FormBuilder){
    myTypeScriptChildrenObjects = functionToGetTheChildrenArray();
}
...

createForm(){
    this.form = this.fb.group({
        childrenArray: this.fb.array([])
    })

    const arrayControl = <FormArray>this.orderForm.controls['childrenArray'];
    this.myTypeScriptChildrenObjects.forEach(item => {
        let newGroup = this.fb.group({
            prop1: [item.prop1],
            prop2: [item.prop2],
            prop3: [item.prop3]
        })
        arrayControl.push(newGroup);
    })
}

在html中循環瀏覽這些內容時，您會執行以下操作：

<select formArrayName="childrenArray">
          <option [formGroupName]="i" *ngFor="let line of form.controls['childrenArray'].controls; index as i" text="prop1" value="prop2">

Answer 2

嘗試了以下代碼，它似乎可以正常工作。

至於表單，您需要添加[formGroup] ，因此：

<form [formGroup]="newServiceForm">

並且由於它現在位於表單組中，因此如果沒有表單控件，它將不接受[(ngModel)]作為select 。 我們可以使用[ngModelOptions]="{standalone: true}"來繞過它

然后我也會更改[ngValue]以引用該對象： [ngValue]="serviceOption"

然后，就像您一樣，將選擇的值添加並推入表單數組。

在模板中，我們現在要迭代此表單數組。 總而言之，模板應如下所示：

<form [formGroup]="newServiceForm">
  <div formArrayName="services">
    <button *ngFor="let child of newServiceForm.controls.services.controls; 
         let i = index" [formGroupName]="i">
      <span [innerHtml]="child.controls.serviceDescription.value"> </span>
    </button>
  </div>

 <select [(ngModel)]="selectedServiceOption" [ngModelOptions]="{standalone: true}">
    <option>Select Service..</option>
    <option *ngFor="let serviceOption of serviceOptions" [ngValue]="serviceOption">
          {{serviceOption.serviceDescription}} 
    </option>
 </select>
 <button  (click)="onAddService()"> Add </button>
</form>

表單控件也可以設置為變量，這樣您就可以避免那些長途旅行。

而且，正如評論中所討論的那樣，這並未考慮用戶可以反復選擇相同值的事實，但這與問題無關。