不编译的reactiveform [英] reactiveform that does not compile

查看：24
本文介绍了不编译的reactiveform的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在开发一个 angular 10 应用程序.我有一个组件是另一个组件的子组件.这是模板

<mat-checkbox formControlName="flag1">{{labelCheckBox}}</mat-checkbox>(第 15 行)<mat-radio-group*ngIf="localForm?.controls['flag1']?.value";类=无线电垂直"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=数据">
<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 mode |键值"[value]=ta.key">{{ ta.value }}</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 mode |键值"[value]=ta.key">{{ ta.value }}</mat-select></mat-form-field>

</表单>

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

export class myComponent 实现 OnInit {本地表单:表单组；@输入()labelCheckBox!: 字符串；@输入()模式！:记录<字符串，字符串>；构造函数(){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: 新的 FormControl(0, []),property13: new FormControl({ value: "", disabled: true }, [Validators.required,]),标志2:新的FormControl(真)，标志1:新的FormControl(假)，数据:新的 FormArray([新表单组({模式I:新的FormControl(val11")，co: new FormControl("val12"),tR: new FormControl("val13"),tF: new FormControl("val14"),}),新表单组({模式I:新的FormControl(val21")，co: new FormControl("val22"),tR: new FormControl("val23"),tF: new FormControl("val24"),}),新表单组({模式I:新的FormControl(val31")，co: new FormControl("val32"),tR: new FormControl("val33"),tF: new FormControl("val34"),}),新表单组({模式I:新的FormControl(val41")，co: new FormControl("val42"),tR: new FormControl("val43"),tF: new FormControl("val44"),}),新表单组({模式I:新的FormControl(val51")，co: new FormControl("val52"),tR: new FormControl("val53"),tF: new FormControl("val51"),}),新表单组({模式I:新的FormControl(val61")，co: new FormControl("val62"),tR: new FormControl("val63"),tF: new FormControl("val64"),}),新表单组({模式I:新的FormControl(val71")，co: new FormControl("val72"),tR: new FormControl("val73"),tF: new FormControl("val74"),}),新表单组({模式I:新的FormControl(val81")，co: new FormControl("val82"),tR: new FormControl("val83"),tF: new FormControl("val84"),}),]),});}}

我有两个错误

TypeError: this.form._updateTreeValidity 不是函数_updateDomValue form_group_directive.ts:271ngOnChanges form_group_directive.ts:94角 6MyComponent_Template mycomponent.ts:15

和

TypeError: this.form.get 不是函数addControl form_group_directive.ts:132_setUpControl form_control_name.ts:223ngOnChanges form_control_name.ts:146角 6MyComponent_Template mycomponent.ts:15

更新

我换行

由

我在下面用 i 替换了 index但我仍然收到两个错误.

第二次更新

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

这是模板

</表单>

这是组件

导出类 MyComponent 实现 OnInit {@输入()表单！:FormGroup>localForm:FormGroup>|不明确的;构造函数(){}ngOnInit() {this.localForm = Object.assign({}, this.form);}}

我仍然收到错误

TypeError: this.form._updateTreeValidity 不是函数_updateDomValue form_group_directive.ts:271ngOnChanges form_group_directive.ts:94角 34

解决方案

Flamant，关于你的解决方案的一些事情

1.-删除mat-radio-button中的[checked]，mat-radio-group中还有formControlName，

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

3.-getterdatas"是一个更好的方法.是 formArray

获取数据(){返回 this.formGroup.get('datas') 作为 FormArray}

你管理 FormArray 就像

<div *ngFor="let dataTerm of datas.controls;let i=index";[formGroupName]=i"><!--可以用来检查formArray的一个值--><div *ngIf="dataTerm.value.rT=='0'">它是 0</div><!--或--><div *ngIf="dataTerm.get('rT').value=='0'">它是 0</div><!--或--><div *ngIf="datas.at(i).get('rT').value=='0'">它是 0</div><!--或--><div *ngIf="formGroup.get('data.'+i+'.rT').value=='0'">它是 0</div><!--在 mat-select 中输入简单使用 formControlName--><mat-select formControlName="modeI">..<mat-select><!--一个输入简单的使用formControlName--><input matInput formControlName="rT">

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>

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"),
        }),
      ]),
    });
  }
}

And I have two errors

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

and

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

UPDATE

I replace the line

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

by

<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.

SECOND UPDATE

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

Here is the template

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

Here is the component

export class MyComponent implements OnInit {

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

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

  constructor() {

  }

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

And I still get the error

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.-remove the [checked] in mat-radio-button, you has yet formControlName in the mat-radio-group,

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

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

get datas()
{
   return this.formGroup.get('datas') as 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>

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

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆