编辑组件中的验证在Angular 8中不起作用

Question

编辑组件模块中的验证失败。

import { Component, OnInit, NgZone } from '@angular/core';
import { BugService } from '../../shared/bug.service';
import { FormBuilder, Validators, FormGroup, NgForm } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-edit-issue',
templateUrl: './edit-issue.component.html',
styleUrls: ['./edit-issue.component.css']
})
export class EditIssueComponent implements OnInit {
IssuesList: any = [];
updateIssueForm: FormGroup;
submitted = false;
ngOnInit() {
this.updateForm()
}
constructor(
private actRoute: ActivatedRoute,
public bugService: BugService,
public fb: FormBuilder,
private ngZone: NgZone,
private router: Router,
) {
var id = this.actRoute.snapshot.paramMap.get('id');
this.bugService.GetIssue(id).subscribe((data) => {
this.updateIssueForm = this.fb.group({
issue_name: [data.issue_name],
issue_message: [data.issue_message],
issue_number: [data.issue_number]
})
})
}
updateForm() {
this.updateIssueForm = this.fb.group({
issue_name: ['', Validators.required],
issue_message: [''],
issue_number: ['', [Validators.required, Validators.minLength(20)]]

})
}
get s() {
console.info(this.updateIssueForm.controls);
return this.updateIssueForm.controls;
}
submitForm() {
console.info(this.updateIssueForm.invalid);
this.submitted = true;
if (this.updateIssueForm.invalid) {
return;
} else {
var id = this.actRoute.snapshot.paramMap.get('id');
this.bugService.UpdateBug(id, this.updateIssueForm.value).subscribe(res => {
this.ngZone.run(() => this.router.navigateByUrl('/issues-list'))
})
}
}
}

edit-issue-component.html

<div class="container wrapper wrapper2">
<div class="row">
<!-- Form -->
<div class="col-md-12">
<h3>Add Issue</h3>
<form [formGroup]="updateIssueForm" (ngSubmit)="submitForm()">
<div class="form-group">
<label>Issue</label>
<input type="text" formControlName="issue_name" class="form-control"
[ngClass]="{ 'is-invalid': submitted && s.issue_name.errors }">
<div *ngIf="submitted && s.issue_name.errors" class="invalid-feedback">
<div *ngIf="s.issue_name.errors.required">Password is required</div>
</div>
</div>
<div class="form-group">
<label>Issue Number</label>
<input type="text" formControlName="issue_number" class="form-control"
[ngClass]="{ 'is-invalid': submitted && s.issue_number.errors }">
<div *ngIf="submitted && s.issue_number.errors" class="invalid-feedback">
<div *ngIf="s.issue_number.errors.required">Password is required</div>
<div *ngIf="s.issue_number.errors.minlength">Password must be at least 6 characters</div>
</div>
</div>
<div class="form-group">
<label>Issue Details</label>
<textarea class="form-control" formControlName="issue_message" rows="3" maxlength="50"></textarea>
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary mr-4">Update</button>
</div>
</form>
</div>

</div>

在这里，如果它试图验证issue_number，则验证失败。即，如果我试图提交带有空issue_number的表单，则应显示错误消息，但表单对象已成功提交

由于我是Angular 8的新手，任何人都可以帮助我解决这个问题。

Answer 1

您的代码按预期工作，部分原因是this.bugService.GetIssue(id)具有异步特性。因此，您从ngOnInit()调用updateForm()，但您也在GetIssue()中创建一个表单。因此OnInit函数在GetIssue()函数之前被调用。在GetIssue()中，您实际上正在创建一个新的表单组，所以我假设您可能认为Validator会被转移到那里，但事实并非如此。您可能希望在GetIssue()中使用patchValue或setValue，这只会更新原始表单，而不会创建新表单(没有验证器(。此外，还要保持构造函数尽可能干净，我们有OnInit来调用http请求之类的东西。

总而言之，我建议如下，从构造函数中删除代码并执行：

ngOnInit() {
this.updateForm();
const id = this.actRoute.snapshot.paramMap.get('id');
this.bugService.GetIssue(id).subscribe((data) => {
this.updateIssueForm.patchValue(data);
})
}

或者只需在从GetIssue()中获取值后构建表单，并在模板中添加一个*ngIf="updateIssueForm"。这取决于您想要如何处理。

编辑：因为您要求查看我上面提到的其他选项。那就意味着在OnInit中根本不调用updateForm()，而只是在GetIssue():中构建表单

this.bugService.GetIssue(id).subscribe((data) => {
this.updateIssueForm = this.fb.group({
issue_name: [data.issue_name, Validators.required],
issue_message: [data.issue_message],
issue_number: [data.issue_number, [Validators.required, Validators.minLength(20)]]
})
})

不过，这意味着您将需要模板中的*ngIf="updateIssueForm"，例如表单标记本身。为什么？因为，如前所述，GetIssue()是异步的，并且模板是在表单构建之前呈现的，因此会抛出关于表单为undefined的错误；