Question

我有一个重复的表格，我需要显示文本框和单选按钮，并且始终将单选按钮绑定到“ 0”或否按钮上。重置表单时，我尝试将单选按钮设置回0，但未绑定，这是代码，

Radion Button.ts

import {
  Component,
  ViewChild
} from '@angular/core';


/**
 * @title Basic use of `<table mat-table>`
 */
@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
  date = 0;
  questionLevel = {
    others: [{
      date: 0
    }],
  }
  dates = [{
      key: "Yes",
      value: 1
    },

  ]
  constructor() {
    if (this.date === 0) {
      this.dates.push({
        key: "No",
        value: this.date
      })
    }
  }
  @ViewChild('form') myNgForm;
  addMore(item, other) {
    console.log(other, "others")
    item.others.push({
      date: 0,
    });
    console.log(item.others, "item atfre add new button")
  }
  SubmitForm(formValues) {
    this.myNgForm.resetForm();
    if (this.date === null) {
      this.dates.splice(1, 1)
      this.dates.push({
        key: "No",
        value: this.date
      })
    }
  }
}

Radio Button.html

<form class="example-form" #form="ngForm" (ngSubmit)="SubmitForm(form)">
  <div *ngFor="let other of questionLevel.others; let i = index ">
    <div class="row">
      <div class="col-sm-6">
        <h6 class="catTitle">Question Title </h6>
      </div>
      <div class="col-sm-6">
        <mat-form-field class="textField">
          <textarea required id="#myDiv" name="other_question_{{i}}" [(ngModel)]="other.question" matInput placeholder="Question Title"></textarea>
          <mat-error>Question field is required</mat-error>
        </mat-form-field>
        <!-- <div *ngIf="other.plus" class="error-danger">Question field is required</div> -->
      </div>
    </div>


    <div class="row radio_row">
      <div class="col-sm-6">
        <h6 class="catTitle">Requires Date</h6>
      </div>
      <div class="col-sm-6 radio_btn">
        <mat-radio-group name="other_date_{{i}}" [(ngModel)]="other.date" required>
          <div class="radio_single" *ngFor="let date of dates">
            <mat-radio-button [value]="date.value">
              {{date.key}}
            </mat-radio-button>
          </div>
        </mat-radio-group>
      </div>
    </div>
  </div>
  <div class="form-group">
    <button type="button" (click)="addMore(questionLevel,questionLevel.others)" class="primary-button">Add
              More Questions</button>
  </div>
  <button type="submit" [disabled]="!form.valid" mat-raised-button class="primary-button" color="primary">Submit</button>
</form>


<!-- Copyright 2018 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license -->

上面是按钮的代码，用于将所有重复形式的值都设置回零。

下面是运行代码的链接。

https://stackblitz.com/edit/angular-ehrv3c-tqsztj

请帮助我解决这个问题

Answer 1

所以我的第一个建议是稍微整理一下逻辑。您应该在日期对象的初始化中添加第二个“否”选项：

dates = [{
    key: "Yes",
    value: 0
},
{
  key: "No",
  value: 1
}

然后，您需要具有selectedDate变量，以便实际上可以跟踪用户选择了哪个日期。

selectedDate = {};

您应该使用ngOnInit而不是构造函数生命周期方法，然后在该方法中可以初始化selectedDate字段。

ngOnInit() {
  this.selectedDate = this.dates.find((date) => {
    return date.key === 'No';
  });
}

最后，提交表单后，您可以将所选选项更新为所需的默认值。

SubmitForm(formValues){
   this.myNgForm.resetForm();     
    this.selectedDate = this.dates.find((date) => {
    return date.key === 'No';
  });
}

最后一件事，更新html一侧的ngModel值的方式，以便正确绑定selectedDate变量。

<mat-radio-group name="other_date_{{i}}" [(ngModel)]="selectedDate" required>
              <div class="radio_single" *ngFor="let date of dates">
                <mat-radio-button [value]="date">
                  {{date.key}}
                </mat-radio-button>

这是您提供的代码的更新链接：https://stackblitz.com/edit/angular-ehrv3c-ybdx2m?file=app%2Ftable-basic-example.html。

Answer 2

您需要在提交...之后再设置问题级别。

restart(){
  this.questionLevel = {
        others: [{
            date: 0
        }
        ],
    }}

constructor(){
        if (this.date === 0) {
            this.dates.push({ key: "No", value: this.date })
        }
        this.restart();

    }

   SubmitForm(formValues){
      console.log(this.myNgForm);
       this.myNgForm.resetForm();     
        if (this.date === null) {
            this.dates=[];
            this.dates.push({ key: "No", value: this.date })
        }
        this.restart();

    }

在Angular 6中的窗体重置时，将单选按钮值重置为零

2 个答案: