如何修复垫子滑块功能？

问题描述

所以我要具有以下功能：

• 当我单击私有/公共滑块时，它会隐藏标题，名字，姓氏表单字段，并添加公司名称和其他表单字段。它的标签也会自动更改为其所在的状态。
• 当我单击另一个滑块时，它的标签会动态更改为当前状态。另一个状态（真实状态）会更改城市和国家（地区）的感觉，使其在键入时以及是否已经存在大写字母时具有大写字母。
• 我将ngIf用于它，就像下面的代码所示。

我要修复以下错误：

• 当我第一次单击滑块时，它旁边的标签不会更改为新状态，只有再次单击后，它才会被设置为正确的状态，如果您单击，它仍然可以正常运行再次
• 可能还有更多错误

我的代码：

.html：

<div>
          <mat-slide-toggle formControlName="slidetoggle" (click)="checkThisBadBoy($event)">{{receptionDestination}}</mat-slide-toggle>
        </div>

        <div *ngIf="!this.DataService.receiverForm.controls.slidetoggle.value">
          <mat-form-field floatLabel="never" class="example-form-field user_information">
            <input class="Inputvalue" matInput type="text" id="country" name="country" formControlName="countryControl" (change)="setGlobalReceiverData('country',$event)">
            <mat-label class="Inputlabel">Country</mat-label>
          </mat-form-field>
        </div>
        <div>
          <mat-slide-toggle formControlName="correspondencetoggle" (click)="checkThisBadBoy2($event)">{{correspondence}}</mat-slide-toggle>
        </div>

        <div *ngIf="this.DataService.receiverForm.controls.correspondencetoggle.value">
          <mat-form-field floatLabel="never" class="example-form-field user_information">
            <input class="Inputvalue" matInput type="text" id="companyname" name="companyname" formControlName="correspondencetoggle" (change)="setGlobalReceiverData('companyname',$event)">
            <mat-label class="Inputlabel">Company name</mat-label>
          </mat-form-field>
        </div>

.ts：

export class TabReceiverComponent implements OnInit {
 public isChecked: boolean;
 public receptionDestination = 'National';

 public isChecked2: boolean;
 public correspondence = 'Private';

ngOnInit(): void {
    this.getTemplateData();
    this.DataService.receiverForm = this.fb.group({
      salutationControl: ['',Validators.required],titleControl: [''],firstNameControl: ['',streetControl: ['',zipControl: ['',locationControl: ['',lastNameControl: ['',inBoxControl: [''],additionalLocationControl: [''],addrec: ['',slidetoggle: [''],correspondencetoggle: [''],countryControl: ['']
    });
  }


  checkThisBadBoy(ev){
    if (this.DataService.receiverForm.controls.slidetoggle.value) {
      this.receptionDestination = 'International';
  } else
  {
      this.receptionDestination = 'National';
  }
  }

  checkThisBadBoy2(ev){
    if (this.DataService.receiverForm.controls.correspondencetoggle.value) {
      this.correspondence = 'Corporate';
  } else
  {
      this.correspondence = 'Private';
  }
  }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）