Question

我无法解决此问题。代码是从Angular文档中复制的。

TS档案：

export class FormsPage {
  todo: FormGroup;
  constructor(private formBuilder: FormBuilder) {
    this.todo = this.formBuilder.group({
      title: ['', [Validators.required, Validators.minLength(5)]],
      description: [''],
    });
    this.todo.valueChanges.subscribe(data=>this.todoOnDataChange(data));
  }
  todoOnDataChange(data: any): void {
     console.log(data);
  }
  logForm(){
    console.log(this.todo.value)
  }
}

HTML文件

<form [formGroup]="todo" (ngSubmit)="logForm()">
    <ion-item>
      <ion-label>Todo</ion-label>
      <ion-input type="text" formControlName="title"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Description</ion-label>
      <ion-textarea formControlName="description"></ion-textarea>
    </ion-item>
    <button ion-button type="submit" [disabled]="!todo.valid">Submit</button>
  </form>

代码有什么问题？我只需要开发一个表单并在onSubmit上调用一个指定的问题。

Answer 1

为变量添加了Formcontrol。请查看以下代码。

export class FormsPage {
      todo: FormGroup;
      title : FormControl;
      description : FormControl;
      constructor(private formBuilder: FormBuilder) {
      this.title = new FormControl("", Validators.compose([Validators.required, Validators.minLength(5)]));
      this.description = new FormControl();
        this.todo = formBuilder.group({
          title: this.title,
          description: this.description
        });
        this.todo.valueChanges.subscribe(data=>this.todoOnDataChange(data));
      }
      todoOnDataChange(data: any): void {
         console.log(data);
      }
      logForm(){
        console.log(this.todo.value)
      }
    }

更新 - 1 上面的代码写在模块文件而不是组件文件。移动代码后问题得到解决。

Answer 2

您导入了FormGroup吗？

ElementToBeSelected(IWebElement, Boolean)

Answer 3

看起来它正在您的HTML中发生。在您的表单初始化之前，可能会设置[formGroup]="todo"。使用ng-container将其设置在*ngIf中，等待表单初始化。

<ng-container *ngIf="todo">
    <form [formGroup]="todo" (ngSubmit)="logForm()">
    //...
    </form>
</ng-container>

未捕获（承诺）：错误：formGroup需要一个FormGroup实例。请通过Angular 4中的一个

3 个答案: