表单重置后保持单选按钮默认值检查 - Angular 6答案

【问题标题】：Keep radio bottom default value checked after form resets - Angular 6表单重置后保持单选按钮默认值检查 - Angular 6
【发布时间】：2023-03-05 22:18:01
【问题描述】：

我有两个材料单选按钮，其中一个在我的 Angular 反应表单中设置为默认值。表单提交后（留在同一页面上），我想对所有表单控件进行重置，并将默认选中的单选按钮返回到选中模式。

所以我在我的 TS 中创建了一个 radioBtnDefault 道具并将其设置为 true，在表单重置后我尝试将其设置为 false 然后返回到 true 但我似乎表单重置功能没有t 完成，直到该值返回 true，因为当我使用 setTimeOut 并稍有延迟时，它可以正常工作。任何关于如何在没有 setTimeOut 函数的情况下使用它的建议将不胜感激。

HTML

 <mat-radio-button class="inner-container__form__inputs__participants__buttons__btn" [checked]="radioBtnDefault" value="1"
                (click)="onClickedOneParticipant()">No
 </mat-radio-button>

this.editMode = false;
    this.formSubmitted = false;
    this.colorSelectionOpen = false;
    this.radioBtnDefault = false;
    this.appointmentsCreationForm.reset();
    this.appointmentsCreationForm.get('participants').setValue('1');
    this.selectedBackgroundColor = '#EB5757';
    this.selectedTextColor = '#FFF';


    setTimeout(() => {
      this.radioBtnDefault = true;
    }, 100);

【问题讨论】：

标签： angular

【解决方案1】：

reset 函数接受一个参数，该参数表示要将表单重置为什么值。如果您不提供它，它将恢复为空值。

this.appointmentsCreationForm.reset({'defaultProp': true});

或任何适合您情况的值。如果您使用的是反应式表单，我会避免使用 [checked] 属性。模型驱动表单背后的想法是模型应该决定表单状态。同样，您可能不想对（点击）做出反应，而是订阅表单控件提供的 valueChanges observable。

【讨论】：

【解决方案2】：

您需要绑定单选按钮的 [value] 属性。

HTML

<form [formGroup]="formData">

    <mat-radio-group formControlName="IsActive">
    <mat-radio-button [value]="true">Active</mat-radio-button>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <mat-radio-button [value]="false">Inactive</mat-radio-button>
    </mat-radio-group>

</form>

TS

 formData: FormGroup;
 active: boolean;

 constructor(private _formBuilder: FormBuilder) { }

 formDataFunction(value: boolean){
    this.formData = this._formBuilder.group({
         IsActive: [value]
    })
 }

 ngOnInit() {
     this.formDataFunction(true);
 }

 onSubmit() {
     console.log(this.formData.value);
     this.active = this.formData.controls['IsActive'].value;
     this.formData.reset(
         this.formDataFunction(true)
     );
 }

Demo Here

【讨论】：