mat-checkbox 意外行为

Question

我在 Angular 应用程序中使用 mat-checkbox。在全球范围内，我的问题如下：我有一个 formGroup，包括一个 mat-checkbox 和一个文本输入字段。当我单击 mat-checkbox 时，我实例化了一个新的 FormGroup，它具有与以前相同的字段，以及另一个文本字段。 mat-checkbox 的值为 true 并被选中。然后，我再次单击复选框以取消选中它并再次实例化第一个 FormGroup，但它保持选中状态而应该取消选中

这里是演示：(https://stackblitz.com/edit/angular-dy7s9u?file=src%2Fapp%2Fapp.component.html)

应用以下步骤： 1) 输入“Dupont”作为名称 -> 确定

2) 选中该框。框的状态被选中。 formControlName 的值为 true。出现地址字段。 -> 好的

3) 输入地址（例如“19 Christchurch Road”）-> 确定

4) 再次取消选中 mat-checkbox。 -> 不正常，mat-checkbox 的状态应该变为未选中，FormControlName 的值为 false，情况相反

Answer 1

这不是 mat-box 的问题。实际上这是由于动态定义formGroup的逻辑存在一些问题。该问题可以使用[hidden] 而不是*ngIf 来隐藏或显示地址控件来解决。通过这样做，我们可以使用正常的 Reactive Form 方法。我不确定这是否会对您有所帮助。将此视为替代解决方案：

在 HTML 中：

<mat-dialog-content  class="colorOpacity7" [formGroup]="dialogFormGroup">
  <div>
    <div>   
     <mat-form-field>
      <input  matInput type="text" placeholder="Nom" formControlName="name">
     </mat-form-field>                  
    </div>
    <div>
     <mat-checkbox formControlName="RAS">Extend</mat-checkbox>
    </div>  
  </div>
  <div [hidden]="!dialogFormGroup.value.RAS">
   <div>    
    <mat-form-field>
     <input  matInput type="text" placeholder="Adresse" formControlName="adress">
    </mat-form-field>                   
   </div>
  </div>
</mat-dialog-content>

在 TS 中：

import { Component, OnInit, Inject, HostListener } from "@angular/core";
import {
  FormBuilder,
  FormGroup,
  FormControl,
  Validators
} from "@angular/forms";
import { Subscription } from "rxjs";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
 public dialogFormGroup: FormGroup;

 constructor(private formBuilder: FormBuilder) {}

 ngOnInit() {
  this.intializeForm();
  this.dialogFormGroup.valueChanges.subscribe(data => {
    if(!data.RAS) this.dialogFormGroup.value.adress="";
    console.log('Form value: ', this.dialogFormGroup.value);
  });
 }

 private intializeForm() {
  this.dialogFormGroup = this.formBuilder.group({
    name: ["", Validators.required],
    RAS: [false],
    adress: ["", Validators.required]
  });    
 }
}

希望这能完成这项工作。请在 DEMO 下方找到：

https://stackblitz.com/edit/angular-sf-reactive-from-issue?file=src/app/app.component.ts

https://angular-sf-reactive-from-issue.stackblitz.io