Question

所以我要具有以下功能：

当我单击私有/公共滑块时，它会隐藏标题，名字，姓氏表单字段，并添加公司名称和其他表单字段。它的标签也会自动更改为其所在的状态。
当我单击另一个滑块时，它的标签会动态更改为当前状态。另一个状态（真实状态）会更改城市和国家（地区）的感觉，使其在键入时以及是否已经存在大写字母时具有大写字母。
我将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: ['', Validators.required],
      streetControl: ['', Validators.required],
      zipControl: ['', Validators.required],
      locationControl: ['', Validators.required],
      lastNameControl: ['', Validators.required],
      inboxControl: [''],
      additionalLocationControl: [''],
      addrec: ['', Validators.required],
      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';
  }
  }

如何修复垫子滑块功能？

0 个答案: