Question

我有一个简单的模型驱动的Angular 2表单，有两个组件：

Angular Material slide-toggle。
单个按钮，点击后会调用我的组件上的onReset(form: FormGroup)。

见this Plunkr。代码如下：

选择-概述-example.html的

<form novalidate [formGroup]="form">
<md-slide-toggle formControlName="example">Example</md-slide-toggle>
<button md-raised-button (click)="onReset(form)">Reset</button>
</form>

选择-概述-example.ts

@Component({
  selector: 'select-overview-example',
  templateUrl: './select-overview-example.html',
})
export class SelectOverviewExample implements OnInit {
  private form: FormGroup;

  constructor(private fb: FormBuilder) {
  }

  ngOnInit() {
    this.createForm();
  }

  onReset(form: FormGroup) {
    this.createForm();
    return false;
  }


  private createForm() {
    let form = this.fb.group({
      example: true
    });

    this.form = form;
  }
}

页面加载正常（即constructor -> ngOnInit -> createForm）并呈现<md-slide-toggle>。

单击重置按钮使用FormBuilder来（重新）构建表单。我这样做是因为我希望重置特定值（而不仅仅是清除整个表单）。

onReset(form: FormGroup) {
    this.createForm();
    return false;
  }

这样可行，但仅在slide-toggle开启时才有效。如果切换为关闭，请点击重置<button>，然后点击onReset，然后点击createForm，会引发异常（您在使用时必须查看浏览器的开发者控制台） example Plunkr）。以下重复例外：

ERROR Error: There is no FormControl instance attached to form control element with name: 'example'

我添加了一些调试日志记录，以查看表单的状态，并实例化幻灯片切换：

private createForm() {
    if (this.form) {
        console.log(this.form.value.example);
    }
    let form = this.fb.group({
        example: true
    });
    this.form = form;
}

页面加载时打印true，点击重置时打印false。

Answer 1

我有更新createForm功能并且工作正常。

private createForm() {
if (this.form) {
  console.log(this.form.value);
}
if(!this.form){
  this.form = this.fb.group({
    example: true
  });
}
this.form.controls['example'].setValue(true);
}

Answer 2

我最终解决了这个问题。在使用FormGroup.getRawValue()创建表单后立即使用FormBuilder。基本上，它允许我在创建表单时创建值的快照/缓存。

我将FormGroup.reset与我的缓存值一起使用。

伪代码：

@Component({
    selector: 'app-form',
    templateUrl: './form.component.html',
    styleUrls: ['./form.component.css'],
})
export class FormComponent implements OnInit {

    form: FormGroup;
    defaultFormValues: any;

    constructor(private fb: FormBuilder) {
    }

    ngOnInit() {
        this.createForm();
    }

    createForm() {
        this.form = this.fb.group({
           // Initialize your form fields here.
        });

        // Cache initialization values for reset.
        this.defaultFormValues = this.form.getRawValue();
    }

    resetForm() {
        // Use previously cached values to reset form.
        this.form.reset(this.defaultFormValues);
    }
}

角度/材质md-slide-toggle无法重新实例化？

2 个答案: