首页 文章

用户输入的数据不存储在组件的变量Angular Reactive形式中

提问于
浏览
2

你好我使用Angular反应形式,我已经使用FormArray动态添加表单控件 . 我正在使用ngModel指令将用户输入的数据存储在components变量中 . 但它不会将其存储在组件变量中 . 我的代码是:

<form [formGroup]="reviewForm" (ngSubmit)="onSubmit()">
  <div class="example-label">
    <span class='block'>    
          <span *ngIf="selectedForm">
                  <h2 class="example-heading">{{displayForm}} </h2>
          </span>
    <div formArrayName="controlArray">
      <div *ngFor="let control of reviewForm.get('controlArray').controls; let i = index">
        <table>
          <tr>
            <td> <span *ngIf="control.value.controlType == 'text'">
          <md-form-field class="example-full-width">
            <input mdInput type="text" placeholder="{{control.value.placeholder}}" 
            ([ngModel])="control.value.value" > <!--user entered data is not storing in control.value.value -->
          </md-form-field>  
      </span></td>

          </tr>
        </table>
      </div>
      <button md-raised-button color="primary" type="submit" [disabled]="!reviewForm.valid">Submit</button>
    </div>
    </span>
  </div>
</form>

这是组件类代码:

export class FormListComponent {

  formsDb: FormData[];
  selectedForm: FormData;
  displayForm: String;
  test: String;
  reviewForm = new FormGroup({
    'controlArray': new FormArray([])
  });
  constructor(public formService: FormService, public authGuardService: AuthGuardService) {
    console.log('form-list is logged in 0528', this.authGuardService.authService.isLoggedIn);
  }

  ngOnInit() {
    this.reviewForm = new FormGroup({
      'controlArray': new FormArray([
      ])
    });
    this.showDefaultForm();
  }



  addForm() {
    this.displayForm = this.selectedForm.formName;
    this.reviewForm.setControl('controlArray', new FormArray([]));  //to reset FormArray               
    console.log('selected form 0528', this.selectedForm);
    for (let control of this.selectedForm.controlsArr) {
      const myControl: Control = new Control(control.controlType, control.label, control.required,
        control.placeholder, control.options);

      var controlArg: FormControl;
      if (control.required)
        controlArg = new FormControl(myControl, Validators.required);
      else
        controlArg = new FormControl(myControl);

      (<FormArray>this.reviewForm.get('controlArray')).push(controlArg);
    }
  }

  onSubmit() {
    console.log('submitted form 0528', this.reviewForm);
  }
}

这是我的Control类,我将其对象传递给FormControl构造函数:

export class Control{  
    constructor(public controlType?:string, public label?:string, public required?:boolean ,public placeholder?:string, 
      public options?:string[], public value?:string){  }
  }

检查用户输入的数据是否存储在组件的变量中我记录了我的FormGroup变量,即本例中的reviewForm . 没有数据保存在其中 . 请帮忙,谢谢

1 回答

  • 2

    我建议不要在反应形式中使用 ngModel . 使用表单控件代替您的被动表单,因此请删除 value[(ngModel)] . 这是您的代码的简化版本,供您了解 . 构建表单,如果你得到一些默认值,迭代该数组并将formgroups推送到formArray:

    constructor(private fb: FormBuilder) {
      this.reviewForm = fb.group({
        controlArray: fb.array([])
      })
      let controlArr = this.reviewForm.controls.controlArray as FormArray
      // arr contains your default values
      this.arr.forEach(x => {
        controlArr.push(fb.group({
          controlType: [x.controlType],
          value: [x.value]
        }))
      })
    }
    

    然后在模板中,切换到使用 formControlName 作为控件,并为FormArray中的每个表单组添加 formGroupName

    <div formArrayName="controlArray">
      <!-- add formGroupName -->
      <div *ngFor="let control of reviewForm.get('controlArray').controls; 
                   let i = index" 
                   [formGroupName]="i">
        <table>
          <tr>
            <td> 
              <span *ngIf="control.value.controlType == 'text'">
                <div class="example-full-width">
                  <input type="text" formControlName="value">
                 </div>  
              </span>
            </td>
          </tr>
        </table>
      </div>
    </div>
    

    StackBlitz

相关问题