Question

提交表单后，当我返回时，出现错误“错误错误：找不到名称为'name'的控件”。我有什么想念的吗？还是需要添加更多支票？
这是我的HTML文件

<div class="col-xs-12">
  <form [formGroup]="sectionForm" novalidate class="form">
    <div class="col-xs-12">
      <div class="col-sm-6">
        <fieldset class="form-group">
          <label>
            Section Name
          </label>
          <input type="text" formControlName="name" class="form-control">
          <div class="invalid-feedback" *ngIf="sectionForm.controls['name']?.errors && submitted">
                        <span *ngIf="sectionForm.controls['name']?.errors.required">
                            Section name is required.
                        </span>
          </div>
        </fieldset>
        <fieldset class="form-group" *ngIf="!subject">
          <label>
            Choose a Subject
          </label>
          <select class="custom-select" placeholder="Select Subject" formControlName="subjectId" >
            <option *ngFor="let subject of subjects" [value]="subject._id">{{ subject?.name }}</option>
          </select>
          <div class="invalid-feedback" *ngIf="sectionForm.controls['subjectId'].errors && submitted">
                    <span *ngIf="sectionForm.controls['subjectId'].errors.required">
                        Subject is required.
                    </span>
          </div>
        </fieldset>
        <button class="btn btn-primary" type="submit" (click)="create()">Submit</button>
      </div>
    </div>
  </form>
</div>

我的ts文件

export class SectionsCreateComponent implements OnInit {
  program;
  submitted;
  test;
  section;
  sectionForm: FormGroup =new FormGroup({});
  isBusy;
  chapter;
  subject;
  subjects = [];

  
  ngOnInit() {
    if (!this.program) {
      this.router.navigate(['program']);
    } else {
      this.refresh();
    }
  }

  refresh() {
    this.getSubjects();

    
    let testId=this.activatedRoute.snapshot.params['testId'];
    
    if (this.section) {
      this.sectionForm = this.fb.group({
        'name': [this.section.name, Validators.compose([Validators.required])],
        'testId': [testId, Validators.compose([Validators.required])],
        'subjectId': [this.section.subjectId, Validators.compose([Validators.required])]
      });
    } else {
      this.sectionForm = this.fb.group({
        'name': ['', Validators.compose([Validators.required])],
        'testId': [testId, Validators.compose([Validators.required])],
        'subjectId': [this.subject ? this.subject._id : '', Validators.compose([Validators.required])]
      });
    }
  }

  getSubjects() {
    this.subjectService.list(this.program).subscribe(
      data => this.subjects = data.data
    );
  }

  create() {
    this.submitted = true;

    if (!this.sectionForm.valid) {
      return;
    }
    let testId=this.activatedRoute.snapshot.params['testId'];
    let programId=this.program;

    this.isBusy = true;
    if (this.section && this.section._id) {
      const reqObject = {
        ...this.sectionForm.value
      };
      reqObject._id = this.section._id;
      this.testsService.updateSection(reqObject).subscribe(
        data => {
          this.alertService.showSuccess('Success', 'Program updated successfully');
          this.dataService.setInterComponentsData({subject: this.subject, program: this.program, chapter: this.chapter, test: this.test});
          this.router.navigate([`tests/${testId}/${programId}/sections/list`]);
        }
      );
    } else {
      this.testsService.createSection(this.sectionForm.value).subscribe(
        data => {
          this.alertService.showSuccess('Success', 'Program added successfully');
          this.dataService.setInterComponentsData({subject: this.subject, program: this.program, chapter: this.chapter, test: this.test});
          this.router.navigate([`tests/${testId}/${programId}/sections/list`]);
        }
      );
    }
  }

}

我也尝试过

“名称”：[this.section this.section.name？ this.section.name：''，Validators.compose（[Validators.required]）]，

但是出现错误。如果我缺少什么，请帮忙

Answer 1

我可以看到!this.program到您获取程序值时已路由到另一个组件，您可能已经使用最初未定义的表单控件sectionForm: FormGroup =new FormGroup({});

来呈现了表单

您可以使用* ngIf有条件地呈现表单：

<form *ngIf="program" [formGroup]="sectionForm" novalidate class="form">
 . . 
</form>

或在ngOnInit中创建一个formGroup实例：

sectionForm: FormGroup;

ngOnInit(){

 this.sectionForm = this.fb.group({
    'name': ['', Validators.compose([Validators.required])],
    'testId': ['', Validators.compose([Validators.required])],
    'subjectId': ['', 
    Validators.compose([Validators.required])]
    });

    . . .

   }

错误错误：找不到名称为“ name”的控件

1 个答案: