Angular 5 Form重置显示错误 - ReactiveFormsModule [重复]

Question

我有以下代码，我只是提交一些细节并在成功提交后重置表单。

ngOnInit() {
    this.initContactForm();    
}

initContactForm(){
    this.contactForm = this.formBuilder.group({
            fullname: ['', Validators.compose([Validators.required, Validators.minLength(2), Validators.maxLength(30)])],
            email: ['', Validators.compose([Validators.required])],
            phone: ['', Validators.compose([Validators.required, Validators.minLength(10), Validators.maxLength(12)])],
            subject: ['', Validators.compose([Validators.required, Validators.maxLength(25), Validators.minLength(5)])],
            message: ['', Validators.compose([Validators.required, Validators.minLength(10), Validators.maxLength(200)])]
        });
}

onSubmit(model){
    if (this.contactForm.valid){
        this.contactModel = model;
        this.dataService.sendContactMessage(this.contactModel).then((resp) => {
            if (resp){
                this.openSnackBar('Message has been sent', 'Done');    
                this.contactForm.reset();
                this.contactForm.updateValueAndValidity();
                this.contactForm.setErrors(null);
            }else{
                console.log('Error');
            }

        });
    }else{
        alert('Invalid form');
    }
}

查看

<form autocomplete="off" [formGroup]="contactForm" novalidate (ngSubmit)="onSubmit(contactForm.value)">
    <div class="row">
        <div class="col m4 s12">
            <mat-form-field>
                <input oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="30" matInput type="text" placeholder="Full Name" value="" name="fullname" formControlName="fullname" required>
                <mat-error *ngIf="contactForm.controls['fullname'].hasError('required')">
                    <strong>Please enter your Fullname</strong>
                </mat-error>
            </mat-form-field>
         </div>
         <div class="col m4 s12">
            <mat-form-field>
                <input matInput type="email" placeholder="Email Address" value="" name="email" formControlName="email" required email>
                <mat-error *ngIf="contactForm.controls['email'].hasError('required')">
                     <strong>Please enter your Email Id</strong>
                </mat-error>
            </mat-form-field>
         </div>
         <div class="col m4 s12">
            <mat-form-field>
                <input matInput type="tel" placeholder="Contact Number" value="" name="contact" formControlName="phone" required tel>
                <mat-error *ngIf="contactForm.controls['phone'].hasError('required')">
                    <strong>Please enter your Contact number</strong>
                 </mat-error>
            </mat-form-field>
        </div>
    </div>
    <div class="clearfix"></div>
    <div class="row">
        <div class="col m12 s12">
            <mat-form-field>
                <input matInput type="text" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="25" placeholder="Subject" value="" name="subject" formControlName="subject" required>
                <mat-error *ngIf="contactForm.controls['subject'].hasError('required')">
                    <strong>Please enter Subject</strong>
                </mat-error>
             </mat-form-field>
        </div>
        <div class="col s6 s12">
            <mat-form-field>
                <textarea matInput type="text" style="resize:none;" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="200" placeholder="Message" value="" name="message" formControlName="message"
                rows="5" required></textarea>
                <mat-error *ngIf="contactForm.controls['message'].hasError('required')">
                    <strong>Please enter your Message</strong>
                </mat-error>
            </mat-form-field>
        </div>
     </div>
     <div class="row margin-top20">
        <div class="col l6 push-l6 s12 right-align">
            <button type="submit" mat-button class="btn btn-primary">Send</button>
        </div>
        </div>
</form>

每当我调用contactForm.reset() 时，值都会被清除，但所有错误都会再次出现。

我已经尝试了各种其他方法来清除它，如下所示：

• 尝试在form reset之后调用initContactForm()

• 尝试循环遍历每个表单控件并使用markAsUntouched()、markAs Pristine() 等，

在这里

Object.keys(this.contactForm.controls).forEach(key => {
    this.contactForm.controls[key].setErrors(null);
    this.contactForm.controls[key].updateValueAndValidity();
});

我还有什么可以尝试的吗？在reset..之后我仍然无法清除错误。希望得到一些帮助。

Answer 1

一旦您重置表单，值就会被清除。

Validators.required 然后将被处理，您的字段将变为无效，因为它是空的。 如果您只想在用户与表单控件交互时显示错误，请将其添加到您的条件中：

mat-error *ngIf="contactForm.controls['phone'].hasError('required') && contactForm.controls['phone'].dirty"

Answer 2

重置表单后尝试添加此内容

    this.contactForm.markAsPristine();
    this.contactForm.markAsUntouched();
    this.contactForm.updateValueAndValidity();