mat-checkbox意外行为

Question

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

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

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

2）选中复选框。盒子的状态被选中。 formControlName的值为true。地址字段出现。 ->确定

3）输入地址（例如“基督城路19号”->确定）>

4）再次取消选中mat-checkbox。 ->不能，mat-checkbox的状态应变为未选中状态，而FormControlName的值为false，这是相反的]]

我在角度应用程序中使用mat-checkbox。在全球范围内，我的问题如下：我有一个formGroup，其中包括mat-checkbox和一个文本输入字段。当我单击mat-checkbox时，我会实例化一个...

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

在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]
  });    
 }
}
希望这能完成工作。请在演示下方找到：

https://stackblitz.com/edit/angular-pbp8zj?file=src%2Fapp%2Fapp.component.ts

https://angular-pbp8zj.stackblitz.io

Answer 1

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