提交数据后,角反应形式控制标记未触及

我在垫子边上有张表格。首先,当我使用表单提交数据时,它可以在所有验证中正常工作。第二次打开表单时,表单不会重置为原始状态。这是我的表单设置

 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>