Question

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

因此，我在TS内创建了一个radioBtnDefault道具并将其设置为true，在表单重置后，我尝试将其设置为false然后再返回到true，但是我似乎在将值恢复为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>

TS

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);

Answer 1

重设功能接受一个参数，该参数将值重置为该值。如果您不提供它，它将恢复为空值。

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

或适合您情况的任何值。如果您使用的是响应式表单，则应避免使用[checked]属性。模型驱动的表单背后的想法是，模型应规定表单状态。同样，您可能不想对（click）做出反应，而是订阅表单控件提供的valueChanges可观察到的内容。

Answer 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

重置表单后，请保持选中收音机底部默认值-角度6

2 个答案:

HTML

TS