Question

我在mat-sidenav上有一个表单。第一次当我使用表单提交数据时，它可以在所有验证中正常工作。然后第二次当我打开表格时，表格不会重置为原始状态。这是我的表格设置

 ngOnInit() {
    this.saleForm = new FormGroup({//Sale Form Initialization
      'accountNumber': new FormControl('', [Validators.required,
      Validators.pattern('[0-9-]*'),
      Validators.minLength(13),
      Validators.maxLength(13)]),
      'customerName': new FormControl('', [Validators.required, Validators.pattern('[a-zA-Z.][a-zA-Z. ]+')]),
})

以下是我在按下表单提交按钮后清除所有验证表单的方法。

this.saleForm.markAsPristine();
this.saleForm.markAsUntouched();
this.saleForm.reset();

在stackoverflow上看了几篇关于这些代码的帖子。这是第二次打开表单时的图片。预计将打开表格，重点关注帐号字段。

<mat-sidenav #sidenav postion="start" mode="over" style="width:20%;">
    <mat-icon (click)="sidenavClose(sidenav)" style="float:right;opacity:0.5;margin: 10px 10px 0px 0px;cursor:pointer">close</mat-icon>
    <form *ngIf="sidenavStartUpMode === 'sale'" [formGroup]="saleForm" (ngSubmit)="onSaleOrUpgrade()" novalidate style="background-color:#e6f2ff;height:auto;padding:7px;">
        <!--novalidate specifies no validation to be done on the DOM-->
        <mat-label>TRACK SALE</mat-label>
        <br>
        <br>
        <div>
            <mat-form-field>
                <input matInput #accountNumber placeholder="Account Number" formControlName="accountNumber">
                <mat-hint align="end">{{ accountNumber.value.length }} / 13</mat-hint>
                <mat-error *ngIf="saleForm.get('accountNumber').touched && saleForm.get('accountNumber').invalid">
                    <mat-error *ngIf="saleForm.get('accountNumber').hasError('minlength')">
                        <strong>Account number has to be 13 digits!</strong>
                    </mat-error>
                </mat-error>
            </mat-form-field>
        </div>
        <br>
        <div>
            <mat-form-field>
                <input matInput placeholder="Customer Name" formControlName="customerName">
            </mat-form-field>
        </div>
        <br>
        <div class="matRadioButton">
            <p style="padding:1px; color:#2775b4">
                <b>Select Package</b>
            </p>
            <mat-radio-group formControlName="packageName">
                <mat-radio-button class="pkgCampaignRadios" *ngFor="let pkg of bs.packages" [value]="pkg.cbsCode">
                    {{pkg.cbsCode}}
                </mat-radio-button>
            </mat-radio-group>
            <button mat-button type="button" (click)="openAddonsDialog()" style="margin-top:10px;padding:3px;width:100%;background-color:#367db9;color:white;border-radius: 2px;">
                <b>{{selectedAddons | addonsSpaceAddPipe}}</b>
            </button>
        </div>

        <div class="matRadioButton">
            <p style="padding:1px; color:#2775b4">
                <b>Select Campaign</b>
            </p>
            <mat-radio-group formControlName="campaignName">
                <mat-radio-button class="pkgCampaignRadios" *ngFor="let campaign of bs.campaigns" [value]="campaign.campaignName">
                    {{campaign.campaignName}}
                </mat-radio-button>
            </mat-radio-group>
        </div>
        <div>
            <mat-button-toggle-group formControlName="crew" (change)="crewSelected($event.source.value)" style="margin-left:50px;text-align:center">
                <mat-button-toggle value="FFM" (click)="datePicker.open()">FFM
                    <h6 style="color:red;font-style:bold;font-size:13px" *ngIf="crew === 'FFM'">{{ datePickerInput }}</h6>
                </mat-button-toggle>
                <mat-button-toggle value="9000">9000
                </mat-button-toggle>
                <mat-button-toggle value="8555">8555
                </mat-button-toggle>
            </mat-button-toggle-group>
            <mat-form-field style="padding:0px;width:1px;visibility:hidden;">
                <input formControlName="postDate" #date matInput [matDatepicker]="datePicker" placeholder="" (dateInput)="addEvent(date)"
                    (dateChange)="addEvent(date)">
                <mat-datepicker #datePicker></mat-datepicker>
            </mat-form-field>
        </div>
        <div>
            <mat-form-field>
                <textarea matInput placeholder="Notes" matTextareaAutosize matAutosizeMinRows="2" matAutosizeMaxRows="5" formControlName="notes"></textarea>
            </mat-form-field>
        </div>
        <button class="btn btn-success" type="submit" style="width:100%;height:50px;" (click)="sidenavClose(sidenav)" mat-raised-button
            [disabled]="saleForm.invalid">Track Sale</button>
    </form>

Answer 1

this.saleForm.reset()本身应该可以工作。

也许您的问题是您的日志中还有另一个错误？如我所见，您设置了一些其他formControlName，例如 packageName ， campaignName ，团队， postDate ，注释< / strong>，这些不是在您的formGroup中创建的。这可能会引起问题。

也：this.saleForm.reset()本身就足够了。如文档所述

重置FormGroup，将所有后代标记为原始且未更改，并所有后代的值都为空。

因此，您无需另外拨打markAsPristine()和markAsUntouched()。

提交数据后，角度反应形式控制标记不变

1 个答案: