mat-checkbox неожиданное поведение - PullRequest
Новая
       20

mat-checkbox неожиданное поведение

0 голосов
/ 29 марта 2020

Я использую mat-checkbox в приложении angular. Во всем мире моя проблема заключается в следующем: у меня есть formGroup, включающая флажок mat и поле ввода текста. Когда я нажимаю на флажок mat, я создаю новую группу FormGroup с теми же полями, что и предыдущие, плюс другое текстовое поле. Значение флажка mat - true, и оно проверено. Затем я снова нажимаю на флажок, чтобы снять флажок и снова создать первую группу FormGroup, но она остается проверенной, пока ее не нужно проверять

Вот демо: (https://stackblitz.com/edit/angular-dy7s9u?file=src%2Fapp%2Fapp.component.html)

Примените следующие шаги: 1) введите «Дюпон» в качестве имени -> ОК

2) установите флажок. Состояние коробки проверено. Значение formControlName равно true. Появится поле адреса. -> ОК

3) введите адрес (например, «19 Крайстчерч-роуд») -> ОК

4) снова снимите флажок с циновкой. -> НЕ ОК, состояние флажка mat должно быть снято со значением false для FormControlName, и наоборот

1 Ответ

1 голос
/ 29 марта 2020

Это не проблема с mat-box. На самом деле это связано с некоторыми проблемами с логическим c динамического определения formGroup. Проблема может быть исправлена ​​с помощью [hidden] вместо *ngIf, чтобы скрыть или показать элемент управления адресом. Таким образом, мы можем go при обычном подходе к реактивной форме. Я не уверен, поможет ли это вам. Рассмотрим это как альтернативное решение:

В 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-sf-reactive-from-issue?file=src / app / app.component.ts

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

...