Question

在添加方法“ addPost”之后，将清除表单，并且验证不起作用，并且添加按钮处于活动状态，只有在正确填充表单后，才应将其激活。帮助请解决问题

<div class="card" *ngIf="toggleCreate">
    <div class="card-body">
        <form [formGroup]="angForm" novalidate>
            <div class="form-group">
                <label class="col-md-4">Picture Title</label>
                <input type="text" class="form-control" formControlName="title" minlength="1" #title/>
            </div>
            <div *ngIf="angForm.controls['title'].invalid && (angForm.controls['title'].dirty || angForm.controls['title'].touched)"
                 class="alert alert-danger">
                <div *ngIf="angForm.controls['title'].errors.required">
                    Title is required.
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-4">Picture Address (url)</label>
                <input type="url" class="form-control" formControlName="url" #url pattern="https?://.+"
                       title="Include http://"/>
            </div>
            <div *ngIf="angForm.controls['url'].invalid && (angForm.controls['url'].dirty || angForm.controls['url'].touched)"
                 class="alert alert-danger">
                Address(url) is required.
                <div *ngIf="angForm.controls['url'].errors.required ">

                </div>
            </div>
            <div class="form-group but-group">
                <button (click)="addPost(title.value, url.value); title.value=''; url.value=''"
                        [disabled]="angForm.pristine || angForm.invalid"
                        class="btn btn-primary">Add
                </button>
            </div>
        </form>
    </div>
</div>

Answer 1

您不更改 FormControls 的值，仅针对元素和更改值不会将FormGroup重置为pristine。但是，由于您使用的是反应式表格，为什么不简单地重置表格呢？（angForm.reset()-https://angular.io/api/forms/FormGroup#reset）。

清洁后为什么验证不起作用？

1 个答案: