无法编译的反应形式 [英] reactiveform that does not compile

问题描述

我正在研究角度为10的应用程序.我有一个组件，它是另一个组件的子组件.这是模板

I am working on an angular 10 application. I have a component that is a child of another component. Here is the template

<form [formGroup]="localForm">
  <mat-checkbox formControlName="flag1">{{labelCheckBox}}</mat-checkbox>
  (line15)
  <mat-radio-group
    *ngIf="localForm?.controls['flag1']?.value"
    class="radio-vertical"
    formControlName="flag2">
    <mat-radio-button value="{{localForm?.controls['flag2']?.value}}">text1</mat-radio-button>
    <mat-radio-button value="{{!localForm?.controls['flag2']?.value}}">text2</mat-radio-button>
  </mat-radio-group>
  <div *ngIf="localForm?.controls['flag1']?.value" formArrayName="datas">
    <div
      *ngFor="let dataTerm of datas.controls; let index = index;"
      formControlName="index">
      <mat-form-field
        *ngIf="localForm?.controls['datas'][index].controls['code']?.value === '00' && localForm?.controls['flag2'].value">
        <mat-label>text3</mat-label>
        <mat-select formControlName="modeI">
          <mat-option [value]=""></mat-option>
          <mat-option *ngFor="let ta of modes | keyvalue" [value]="ta.key">{{ ta.value }}</mat-option>
        </mat-select>
      </mat-form-field>
      <mat-form-field
        *ngIf="localForm?.controls['datas'][index].controls['code']?.value != '00' && !localForm?.controls['flag2'].value">
        <mat-label>{{localForm?.controls['datas'][index].controls['typeRecu']?.value}}</mat-label>
        <mat-select formControlName="modeI">
          <mat-option [value]=""></mat-option>
          <mat-option *ngFor="let ta of modes | keyvalue" [value]="ta.key">{{ ta.value }}</mat-option>
        </mat-select>
      </mat-form-field>
    </div>
  </div>
</form>

在构造函数中，我初始化 formGroup

and in the constructor, I initialise the formGroup

export class myComponent implements OnInit {
  localForm: FormGroup;

  @Input()
  labelCheckBox!: string;

  @Input()
  modes!: Record<string, string>;

  constructor() {
    this.localForm = new FormGroup({
      property1: new FormControl(""),
      property2: new FormControl(""),
      property3: new FormControl(""),
      property4: new FormControl(""),
      property5: new FormControl(""),
      property6: new FormControl(""),
      property7: new FormControl(""),
      property8: new FormControl("250", [Validators.required]),
      property9: new FormControl("", [Validators.required]),
      property10: new FormControl("", [Validators.required]),
      property11: new FormControl({ value: 0, disabled: true }, [
        Validators.required,
      ]),
      property12: new FormControl(0, []),
      property13: new FormControl({ value: "", disabled: true }, [
        Validators.required,
      ]),
      flag2: new FormControl(true),
      flag1: new FormControl(false),
      datas: new FormArray([
        new FormGroup({
          modeI: new FormControl("val11"),
          co: new FormControl("val12"),
          tR: new FormControl("val13"),
          tF: new FormControl("val14"),
        }),
        new FormGroup({
          modeI: new FormControl("val21"),
          co: new FormControl("val22"),
          tR: new FormControl("val23"),
          tF: new FormControl("val24"),
        }),
        new FormGroup({
          modeI: new FormControl("val31"),
          co: new FormControl("val32"),
          tR: new FormControl("val33"),
          tF: new FormControl("val34"),
        }),
        new FormGroup({
          modeI: new FormControl("val41"),
          co: new FormControl("val42"),
          tR: new FormControl("val43"),
          tF: new FormControl("val44"),
        }),
        new FormGroup({
          modeI: new FormControl("val51"),
          co: new FormControl("val52"),
          tR: new FormControl("val53"),
          tF: new FormControl("val51"),
        }),
        new FormGroup({
          modeI: new FormControl("val61"),
          co: new FormControl("val62"),
          tR: new FormControl("val63"),
          tF: new FormControl("val64"),
        }),
        new FormGroup({
          modeI: new FormControl("val71"),
          co: new FormControl("val72"),
          tR: new FormControl("val73"),
          tF: new FormControl("val74"),
        }),
        new FormGroup({
          modeI: new FormControl("val81"),
          co: new FormControl("val82"),
          tR: new FormControl("val83"),
          tF: new FormControl("val84"),
        }),
      ]),
    });
  }
}

我有两个错误

TypeError: this.form._updateTreeValidity is not a function
    _updateDomValue form_group_directive.ts:271
    ngOnChanges form_group_directive.ts:94
    Angular 6
    MyComponent_Template mycomponent.ts:15

和

TypeError: this.form.get is not a function
    addControl form_group_directive.ts:132
    _setUpControl form_control_name.ts:223
    ngOnChanges form_control_name.ts:146
    Angular 6
MyComponent_Template mycomponent.ts:15

更新

我替换行

<div
      *ngFor="let dataTerm of datas.controls; let index = index;"
      formControlName="index">

作者

<div *ngFor="let dataTerm of localForm.controls.datas; let i = index;" [formControlName]="i">

，我在下面用我替换了索引但我仍然遇到两个错误.

and I replaced index by i underneath but I still get the two errors.

我现在使用"@ ng-stack/forms"中的FormGroup

I now use FormGroup from "@ng-stack/forms"

这是模板

<form *ngIf="localForm" [formGroup]="localForm">
</form>

这里是组件

export class MyComponent implements OnInit {

  @Input()
  form!: FormGroup<DeepRequired<myBean>>

  localForm: FormGroup<DeepRequired<myBean>> | undefined;

  constructor() {

  }

  ngOnInit() {
    this.localForm = Object.assign({}, this.form);
  }
}

我仍然收到错误消息

TypeError: this.form._updateTreeValidity is not a function
    _updateDomValue form_group_directive.ts:271
    ngOnChanges form_group_directive.ts:94
    Angular 34

推荐答案

华丽，有关您的解决方案的一些事情

Flamant, a few things about your solution

1.-删除mat-radio-button中的 [checked] ，您尚未在mat-radio-group中拥有formControlName，

1.-remove the [checked] in mat-radio-button, you has yet formControlName in the mat-radio-group,

2.-您可以使用简单的 formControlName ='flag'，不需要 [formControlName] =''flag''

2.-You can use simple formControlName="flag", not need [formControlName]="'flag'"

3.-更好的方法是使吸气剂数据"不正确.是formArray

3.-It's a better aproach that the getter "datas" was the formArray

get datas()
{
   return this.formGroup.get('datas') as FormArray
}

然后像这样管理FormArray

And you mannage the FormArray like

<div formArrayName="datas">
  <div *ngFor="let dataTerm of datas.controls;let i=index" [formGroupName]="i">

    <!--you can use to check one value of the formArray-->
    <div *ngIf="dataTerm.value.rT=='0'">it's 0</div>
    <!--or-->
    <div *ngIf="dataTerm.get('rT').value=='0'">it's 0</div>
    <!--or-->
    <div *ngIf="datas.at(i).get('rT').value=='0'">it's 0</div>
    <!--or-->
    <div *ngIf="formGroup.get('data.'+i+'.rT').value=='0'">it's 0</div>


    <!--an input in mat-select simple use formControlName-->
    <mat-select formControlName="modeI">
        ..
    <mat-select>

    <!--an input simple use formControlName-->
    <input matInput formControlName="rT">
</div>

这篇关于无法编译的反应形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！