Динамическое создание формы в угловых 6

Question

Я пытаюсь начать создавать динамическую форму в Angular 2, и я использую настройку из документации Angular .У меня не было проблем с их настройкой, которая просто жестко кодирует данные в сервисе в сопоставлении с вызовом API.Моя проблема заключается в том, что, когда я пытаюсь использовать вызов API, значения, которые я не могу создать при создании динамической формы.

Данные поступают из вызова API успешно.Я считаю, что моя проблема в том, что [вопросы] обязательны до того, как данные будут готовы.Может кто-нибудь сказать мне лучший способ сделать это или, пожалуйста, предоставить какие-либо предложения о том, что я делаю неправильно, пожалуйста?Есть ли способ, которым я мог бы сначала установить свойства в API?

Здесь ниже мой подход выглядит так:

TS FILE

 export class DynamicFormComponent implements OnInit {

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

 constructor(private qcs: QuestionControlService ,private dy :QuestionService) {  }

 ngOnInit() {
this.questions=this.dy.getDataFromService();
this.form = this.qcs.toFormGroup(this.questions);
 }

onSubmit() {
 this.payLoad = JSON.stringify(this.form.value);
 }
 }

HTML

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

        <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>
##QUESTIONSERVICE.TS

getDataFromService(){
let questions: QuestionBase<any>[]=[];
this.auth.dynamicFormData().subscribe(
    (result) => {
        let data=result;
        for(var i=0;i<data.length;i++){
            questions.push(new TextboxQuestion(data[i]));
        }

    }); 
return questions.sort((a, b) => a.order - b.order);
}
}

РЕЗУЛЬТАТ ДАННЫХ ИЗ API IS

[{"value":"Sireesha_0","key":"firstName_0","label":"First Name_0","required":true,"order":1,"controlType":"text"},{"value":"Sireesha_1","key":"firstName_1","label":"First Name_1","required":true,"order":1,"controlType":"text"}]

ОШИБКИ

Произошла ошибка: не удалось прочитать свойство 'valid' из неопределенного

Произошла ошибка в Перехватчики ошибок TypeError:Невозможно прочитать свойство 'valid' из неопределенного в DynamicFormQuestionComponent.get [as isValid] (dynamic-form-question.component.ts: 13)

Answer 1

Я изменил свой код, как показано ниже, и он работает хорошо.

html

  <form (ngSubmit)="onSubmit()" [formGroup]="form" *ngIf="isFormReady">

    <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>

ts

 isFormReady:booelan;

ngOnInit() {
  this.questions=this.dy.getDataFromService();
}


getDataFromService(){
  let questions: QuestionBase<any>[]=[];
  this.auth.dynamicFormData().subscribe(
  (result) => {
    let data=result;
    for(var i=0;i<data.length;i++){
        questions.push(new TextboxQuestion(data[i]));
    }

 }); 
  this.form = this.qcs.toFormGroup(this.questions);
  this.isFormReady=true;
return questions.sort((a, b) => a.order - b.order);
 }