Невозможно добавить значение в FormControl в Angular 7 - PullRequest
Новая
       22

Невозможно добавить значение в FormControl в Angular 7

3 голосов
/ 12 июня 2019

Данные 1 

     []
     0: {type: "text", name: "first_name", label: "First Name", value: "", required: true}
     1: {type: "text", name: "last_name", label: "Last Name", value: "", required: true}
       length: 2
       __proto__: Array(0)

Данные 2 

       (2) [{…}, {…}]
       0: {type: "text", name: "first_name", label: "First Name", value: "", required: true}
       1: {type: "text", name: "last_name", label: "Last Name", value: "", required: true}
    length: 2
  __proto__: Array(0)

API Json 

        FIELDS_FILTERS: [
        {
        type: "text",
        name: "first_name",
        label: "First Name",
        value: "",
        required: true,
        },
        {
        type: "text",
        name: "last_name",
        label: "Last Name",
        value: "",
        required: true,
        },
        ],

Угловой код 

export class DynamicFormsTestComponent implements OnInit {
              publicDeals: Person[] = [];
              public form: FormGroup;
              public fields1: any[] = [
                {
                  type: 'text',
                  name: 'first_name',
                  label: 'First Name',
                  value: '',
                  required: true,
                },
                {
                  type: 'text',
                  name: 'last_name',
                  label: 'Last Name',
                  value: '',
                  required: true,
                },
              ];
              p_col: any;


              constructor(private httpClient: HttpClient, private http: Http, private formBuilder: FormBuilder,
                private personservice: PersonService) {}
              ngOnInit() {

                this.getOtherDetails();
                this.p_col = this.publicDeals;
                this.form = new FormGroup({
                  fields: new FormControl(this.publicDeals)
                });
              }

              getFields() {

              return this.p_col;  ----this don't works
             -- return this.fields1;  --this works
              }

              getOtherDetails() {
                return this.personservice.getDatatableDetails()
                  .subscribe(persons => {
                    persons.FIELDS_FILTERS.forEach(element => {
                      this.publicDeals.push(element);
                    });
                  });
              }

this.p_col выводит данные 2, что нормально

Компонент html 

    {{publicDeals|json}}
    <app-dynamic-form-builder [fields]="getFields()"></app-dynamic-form-builder>

когда я бросаю JSON.

выход 

 [{
"type": "text",
"name": "first_name",
"label": "First Name",
"value": "",
"required": false
  }, {
"type": "text",
"name": "last_name",
"label": "Last Name",
"value": "",
"required": false
 }]

Теперь я отправил данные правильного формата как data2 в динамический компонент, но при попытке распечатать формат данных this.fields изменился на данные 1.

Если я выведу в динамический компонент данные 2, мой код будет работать.

Динамический компонент ts 

        export class DynamicFormBuilderComponent implements OnInit {
          // @Output() onSubmit = new EventEmitter();
          @Input() fields: any[] = [];
          form: FormGroup;
          persons: Person[];
          submitted = false;
          constructor(private router: Router, private personservice: PersonService) { }

          ngOnInit() {


            console.log(this.fields); 
           console.log(typeof(this.fields)); --always return object

            console.log(this.fields.length);  
           --length 0  this.publicdeals.
           --length 2  this.fields1.

       const fieldsCtrls = {};
        for (const f of this.fields) {
        console.log('for lopp true=============');


        }
        this.form = new FormGroup(fieldsCtrls);
            }

Данные 1 

console.log(this.publicDeals)

Данные 2 

  console.log(this.fields1)

Проблема

  • при доступе к json this.publicDeals в динамическом компоненте его field.length до 0.

  • но при доступе к this.field1 возвращается длина 2.

  • Я могу получить доступ к данным в динамическом компоненте с помощью жестко закодированного массива, но проблема возникает при рендеринге данных из API-сервиса.

Ответы [ 2 ]

0 голосов
/ 12 июня 2019

Решение, которое сработало 

 <app-dynamic-form-builder  *ngIf="publicDeals.length > 0" [fields]="publicDeals"></app-dynamic-form-builder>
0 голосов
/ 12 июня 2019

Вам нужно поставить строки: 

        this.p_col = this.publicDeals;
        this.form = new FormGroup({
          fields: new FormControl(this.publicDeals)
        });

ПОД функцию подписки в getOtherDetails () 

       getOtherDetails() {
            return this.personservice.getDatatableDetails()
              .subscribe(persons => {
                persons.FIELDS_FILTERS.forEach(element => {
                  this.publicDeals.push(element);
                });
                .....HERE....
              });

учтите, что this.publicDeals не имеет значения до завершения вызова

...