如何确保在 angular 中呈现响应式表单之前加载可观察数据

Question

我正在研究 Angular 5 应用程序中的响应式表单组。我通过 API 获取订阅了 observable 的数据。我的问题是我的 formGroup 在不存在时尝试加载数据并抛出异常。我需要确保 loadData() 在 formGroup 初始化之前加载数据。

组件

export class QuestionsComponent implements OnInit {

@Input() questions: QuestionBase<any>[] = [];
@Input() questionsList: QuestionBase<any>[] = [];
@Input() questionsMappedList: QuestionBase<any>[] = [];
form: FormGroup;

private view: BehaviorSubject<QuestionsDataModel>;
private consultationQuestions: QuestionsDataModel;

constructor(private dataService: QuestionsDataService, private router: Router, private session: SessionStorageService, private qcs: QuestionControlService, private questionService: QuestionMappingService) {

  }

ngOnInit(): void {
    this.view = new BehaviorSubject<QuestionsDataModel>(null);
    this.loadData();
    this.questions = this.questionService.getQuestions();
    //this.questions = this.questionService.getQuestionList(null);
     this.form = this.qcs.toFormGroup(this.questions); 
}

public loadData():void
{

    //filtersLoaded: Promise<boolean>;

  var consultationId = this.session.getItem('consultationId');

   this.dataService.getQuestions(consultationId)
   .subscribe(data =>{
     debugger;
        this.view.next(data);
        this.questionsList = this.questionService.getQuestionList(data);
        console.log("dynamic questionsList...", this.questionsList);

   });
}

模板

<div>
    <form (ngSubmit)="onSubmit()" [formGroup]="form">

      <div *ngFor="let question of questions" class="form-row">
        <app-question [question]="question" [form]="form"></app-question>
      </div>

      <div class="form-row">
        <button type="submit" [disabled]="!form.valid">Save</button>
      </div>
    </form>

    <div *ngIf="payLoad" class="form-row">
      <strong>Saved the following values</strong><br>{{payLoad}}
    </div>
 </div>

Answer 1

您应该在 ngOnInit 中初始化表单，然后在 API 调用后更新其值。

ngOnInit(): void {
    this.view = new BehaviorSubject<QuestionsDataModel>(null);
    this.loadData();
    this.questions = this.questionService.getQuestions();
    this.form = this.formBuilder.group({
      sampleProperty: '',
      // init form values
    });
}

public loadData(): void {
  var consultationId = this.session.getItem('consultationId');

   this.dataService.getQuestions(consultationId)
   .subscribe(data =>{
     debugger;
        this.view.next(data);
        this.questionsList = this.questionService.getQuestionList(data);

        this.form = this.qcs.toFormGroup(this.questions); 
   });
}

Answer 2

在 ngOnInit 上添加布尔条件..

private formData = false;

然后在您的 loadData 函数中执行...

loadData() {

            this.formData = true;

然后在你的模板中做..

<form *nGIf='formData'>

或者干脆做..

<form *nGIf='myFormDataVariables' >

如何确保在 angular 中呈现响应式表单之前加载可观察数据

How to ensure load observable data before rendering reactive form in angular

angular

angular-reactive-forms

组件

模板