我如何在Angular反应性表单中填充选择表单字段?

问题描述 投票:0回答:2

我正在尝试从HTTP调用中填充选择表单字段。我得到了数据,但似乎无法使用FormArray正确设置值。

我已经尝试过调整对象的call.references甚至使用数组符号。我可以将其转储到控制台,但不能填充选择表单字段。因此,我认为我的Angular代码中有错误,但是在网上找到该示例的失败。我遇到的所有文档/教程在表单中都没有选择内容。

public ngOnInit () {
    // Reactive form fields
    this.timecardForm = this.fb.group( {
      payBeginningDate: [ '2019-03-19', [ Validators.required ] ],
      payEndingDate: [ '2019-03-26', [ Validators.required ] ],
      payCategoriesTracked: this.fb.array( [ this.buildPayCategoriesTracked() ] ), // This is the one on which I am working
      overtimeCategories: '1',
      workHoursTracked: this.fb.array( [ this.buildWorkTracked() ] ),
      earnings: [ { value: null, disabled: true }, [ Validators.required ] ],
      totalHours: [ { value: null, disabled: true }, [ Validators.required ] ],
      totalEarnings: [ { value: null, disabled: true }, [ Validators.required ] ]
    } );
... // There is some more unrelated code
// Dynamically build payCategories row
  buildPayCategoriesTracked (): FormGroup {
    console.log( 'buildPayCategoriesTracked: ', this.timeEntry.payCategories ); // This prints to the console successfully
    return this.fb.group( {
      payCategories: [ this.timeEntry.payCategories, [ Validators.required ] ]
    } );
  }
<!-- The HTML in question... -->
<select formControlName="{{i}}"
        id="{{ 'payCategoriesTracked' + i }}"
        class="form-control"
        (change)="onRecordUpdated(timeCard, timecardDet)"
        [ngClass]="{'is-invalid': payCategoriesMessage }">
        <option value=null
                disabled
                selected
                hidden>--Select--</option>
        <option *ngFor="let payCategory of payCategories"
        [ngValue]="payCategoryDescription.payCategoryId">{{payCategoryDescription}}</option>
        </select>

我只希望我的payCategories填充我的选择表单字段。返回的项之一的示例是:

{{payCategoryId:9,说明:“ DUE FROM LIBRAR”,payType:“ Hourly”,isActive:true}

所以我希望将选择值作为id并将描述显示在options标记中。

更新我已经按如下方式更改了HTML ...

<div *ngFor="let payCategoriesTracked of payCategoriesTracked.controls;let i=index">
<mat-form-field>
    <mat-label>Pay Category</mat-label>
    <mat-select formControlName="i"
                (change)="onRecordUpdated(timeCard, timecardDet)"
                [ngClass]="{'is-invalid': payCategoriesMessage }">
        <mat-option *ngFor="let payCategory of payCategories"
                    [ngValue]="payCategory.value">
            {{payCategory.description}}
        </mat-option>
    </mat-select>
</mat-form-field>

解决方案我想通了...哇!这是我的解决方案...

<mat-form-field>
    <mat-label>Pay Category</mat-label>
    <select matNativeControl
            formControlName="payCategory">
        <option *ngFor="let payCategory of payCategories"
                [ngValue]="payCategory">
          {{payCategory.description}}
        </option>
    </select>
</mat-form-field>
// This is the FormControl, which is within a formgroup...
payCategory: new FormControl( this.buildPayCategories() )
// Pull in payCategories for select list from service
  buildPayCategories () {
    this.payCategories = this.timeEntry.payCategories;
    return this.payCategories;
  }
angular angular-reactive-forms
2个回答
0
投票

使用ngFor在模板中使用'this.timeEntry.payCategories'构建选项

<option *ngFor="let payCategory of timeEntry.payCategories" [value]="payCategory.payCategoryId">{{ payCategory.description }}</option>

[构建反应式窗体时,FormControl中的第一个参数应该是select中的值,换句话说,就是selected选项。示例:

return this.fb.group( {
      payCategories: [ 2, [ Validators.required ] ]
    } );

将值等于2的选项匹配。


0
投票

粘土,如果需要FormGroup的FormArray或FormControls的FormArray,则需要选择。

FormGroups的FormArray

  myForm=new FormGroup({
    myArray:new FormArray([
    new FormGroup({
      prop1:new FormControl('',Validators.required),
      prop2:new FormControl('',Validators.required)
    })
  ])
  })

<!--your form--->
<form [formGroup]="myForm">
    <!--a div with formArrayName--->
    <div formArrayName="myArray">
        <!--a div that iterate over "controls" and has [formGroupName]-->
        <div *ngFor="let group of myForm.get('myArray').controls;
                  let i=index" [formGroupName]="i">
            <!--your input using formControlName-->
            <input formControlName="prop1">
            <input formControlName="prop2"/>
         </div>
    </div>
</form>
{{myForm?.value|json}}
//Some like { "myArray": [ { "prop1": "", "prop2": "" } ] } 

FormControl的FormArray

  myForm2 = new FormGroup({
    myArray: new FormArray([
      new FormControl('', Validators.required),
      new FormControl('', Validators.required)
    ])
  })

<!--your form--->
<form [formGroup]="myForm2">
    <!--a div with formArrayName--->
  <div formArrayName="myArray">
  <!--a div that iterate over "controls"-->
  <div *ngFor="let group of myForm2.get('myArray').controls;let i=index">
      <!--a unique element using [formControlName]-->
      <input [formControlName]="i">
  </div>
  </div>
</form>
{{myForm2?.value|json}}
//will be like  { "myArray": [ "", "" ] }

注意:我直接使用new FormGroup和new FormArray,而不是FormBuilder。这避免了注入FormBuilder的需要,并且,如果需要,可以更改“更改检测”,但是在sintax中,差别不大]

注意2:在数组中引用控件的方式更多,但我认为这是最重要的。

制作表单的提示

  1. 总是与{{form?.value | json}}进行竞争。一个formGroup存在独立于“输入”
  2. 我们正在开始写<form *ngIf="form" [formGroup]="myForm"></form>
  3. 首先使用简单输入
  4. 总是需要知道我们想在form.value中得到什么

更新关于选择。选择是输入,只需将formControlName赋予“选择”即可。选择需要一个对象数组来显示选项。如果我们的对象数组具有两个属性,即“值”和“文本”,则通常使用类似的代码:

//If our arrayForm is an ArrayForm of FormGroups
<select formControlName="prop1">
  <options *ngFor="let item of options" [value]="item.value">
      {{item.text}}
  </option> 
</select>
//If our arrayForm is a Array of FormControls
<select [formControlName]="i">
  <options *ngFor="let item of options" [value]="item.value">
      {{item.text}}
  </option> 
</select>

[首先,请考虑在任何地方都没有[选定的]:这不是必需的。如果我们可以选择一个值,我们将为FormControl提供值。

[当我们使用ReactiveForm时,通常尽管使用(更改),我们仍然订阅控件的changeValue属性,我们必须小心:在选项中,我们可以使用[value]或[ngValue]。但是值可以是简单变量(字符串或数字)或复杂对象。如果我们不使用Cascate中的dropdop,则通常仅使用一个简单变量。

更新我进行了更改,我想我已经接近了,因为我看到了通过{{timecardForm?.value | json}}

转储到屏幕上的数据

我收到的control.registerOnChange不是函数错误,这使我相信我引用了不正确的内容。这是我更新的代码...

<div class="col-2">
          <div formArrayName="payCategoriesTracked">
            <div *ngFor="let payCategory of payCategoriesTracked.controls; let i=index">
              <mat-form-field>
                <mat-label>Pay Category</mat-label>
                <mat-select [formControlName]="i"
                            (change)="onRecordUpdated(timeCard, timecardDet)"
                            [ngClass]="{'is-invalid': payCategoriesMessage }">
                  <mat-option *ngFor="let payCategory of payCategories"
                              [ngValue]="payCategory">
                    {{payCategory.description}}
                  </mat-option>
                </mat-select>
              </mat-form-field>
            </div>
          </div>

数据转储如下...

“” payCategoriesTracked“:[{” payCategories“:[{” payCategoryId“:1,” description“:” Converted Data“,...等

© www.soinside.com 2019 - 2024. All rights reserved.