Question

通过选择单选按钮填写带有多个字段（办公室地址，主要和传真）的表单。字段正确填写（单击按钮）。但是，如果我单击一个字段或复选框，则会清除以前填写的字段值。

Angular / cli 7.3.9 动画6.1.10 材料7.3.7

在“办公室地址”，“主要”和“传真”字段中添加（单击）= getOffice（city），但这是重复的工作。

将单选按钮完全以自己的形式放置-不执行任何操作将ngChange = getOffice（city）放在mat-radio-group标记中-不会执行任何操作 -包含（ngChange）
formControlName =“ city”不起作用

https://www.tutorialspoint.com/angular_material7/angular_material7_radio_button.htm显示了ngModel的使用

HTML

        <div *ngIf="addNewUser" class="row" >
                <form [formGroup]="materials.newUserForm" class="col">
                        <div class="row useroptions">
                                <mat-checkbox class="col-2" formControlName="cBoxEmployeeName" >Employee Name</mat-checkbox> 
                                <input matInput placeholder="Employee Name" class="col-4" formControlName="n_EmployeeName" >
                        </div>
                        <div class="row">
                                <mat-checkbox class="col-2" formControlName="cBoxOfficeAddress">Office Address</mat-checkbox> 
                                {{materials.newUserForm.value.n_OfficeAddress}}
                        </div>
                        <div class="row">
                                <mat-checkbox class="col-2" formControlName="cBoxMainPhone">Main</mat-checkbox> 
                                {{materials.newUserForm.value.n_MainPhone}}
                        </div>
                        <div class="row">
                                <mat-checkbox class="col-2" formControlName="cBoxDirectPhone" >Direct</mat-checkbox> 
                                <input matInput placeholder="Direct Phone Number (###) ###-#### (direct)" class="col-4" formControlName="n_MobilePhone" >
                        </div>
                        <div class="row">
                                <mat-checkbox class="col-2" formControlName="cBoxFax">Fax</mat-checkbox> 
                                {{materials.newUserForm.value.n_Fax}}
                        </div>
                </form>
        </div>
        <div *ngIf="addNewUser" class="spacer">&nbsp;</div>
        <div *ngIf="addNewUser" class="row" >
                                <mat-radio-group class="col-8" [(ngModel)]="city"  > 
                                        <mat-radio-button [value]="city" *ngFor="let city of cities">{{city}}&nbsp;&nbsp;</mat-radio-button>&nbsp;
                                </mat-radio-group>
                                <button mat-raised-button (click)="getOffice(city)">Set Office Details</button>
        </div>

main.ts

public city: string;

  public cities = [ "Denver", "Los Angeles", "New York" ];


getOffice(city: string): void {
    console.log("in getOffice()" + city);
    switch (city) {
      case 'Denver': 
        this.materials.newUserForm.value.n_fax = "(123) 456-7890 (fax)" ;
        this.materials.newUserForm.value.n_MainPhone = "(303) 333-4444 (main)";
        this.materials.newUserForm.value.n_OfficeAddress = "Denver, CO";
        break;
      case 'Los Angeles':
        this.materials.newUserForm.value.n_Fax = "(123) 456-7890 (fax)";
        this.materials.newUserForm.value.n_MainPhone = "(213) 333-4444 (main)";
        this.materials.newUserForm.value.n_OfficeAddress = "Los Angeles, CA";
        break;
      case 'New York': 
        this.materials.newUserForm.value.n_Fax = "(123) 456-7890 (fax)";
        this.materials.newUserForm.value.n_MainPhone = "(202) 333-4444 (main)";
        this.materials.newUserForm.value.n_OfficeAddress = "New York, NY";
        break;
    }
  }

materials.ts

addNewUser() {
      this.newUserForm = this.fb.group({
        'cBoxEmployeeName':true,
        'cBoxOfficeAddress':true,
        'cBoxMainPhone':true,
        'cBoxDirectPhone':true,
        'cBoxMobilePhone':true,
        'cBoxFax':true,
        'n_EmployeeName':"",
        'n_OfficeAddress':null,
        'n_MainPhone':null,
        'n_DirectPhone':null,
      });
    }

我可以确定Office地址，主要和传真值的详细信息，除非单击“设置办公室详细信息”按钮，否则不会显示。但是，如果我单击了按钮，然后去编辑一个字段（任何字段），则办公室地址，主要和传真消失了。

再次单击该按钮，它们将重新出现，但没有任何理由（我看到）该表格应清除这些值。

最好的选择是，当我选择一个单选按钮并保持填充状态时填充字段。

单选按钮的值被其他表单域重置

0 个答案: