angular 8 динамических c форма - не может прочитать значения в json - PullRequest
Новая
       5

angular 8 динамических c форма - не может прочитать значения в json

0 голосов
/ 30 января 2020

json генерируется и появляется в значении в html, чтобы упростить понимание проблемы, но значения, которые появляются .. "мм" - от создания массива, а не от ввода, как предполагается, что.

был бы признателен за любую помощь, я почти уверен, что чего-то не хватает в коде, но, пройдя несколько уроков, я не смог понять:

вот компонент: 

import { Component, OnInit  } from '@angular/core';
import {AuthService} from './auth.service';
import {FormBuilder, Validators, FormGroup, FormArray, FormControl} from '@angular/forms';


@Component({
  selector: 'personForm',
  templateUrl: 'persons-form.component.html',
  styleUrls: ['./persons-form.component.css']
})
export class PersonsFormComponent implements  OnInit {

  constructor(private authService: AuthService, private fb: FormBuilder) {
  }

  myForm: FormGroup;
  personAddresses: FormArray;


  ngOnInit() {
    this.myForm = this.fb.group({
      personName: [''],
      personPassword: [''],
      personCity: ['New-York', Validators.required],
      personAge: [''],
      personAddresses: this.fb.array([(this.createAddress())])
    });
  }


  get personAddresses() {
    return this.myForm.get('personAddresses') as FormArray;
  }

  createAddress(): FormGroup {
    debugger
    return this.fb.group({
      street: ['mm'],
      number: ['mm'],
      postalCode: ['mm']
    });
  }

  addAddress() {
    debugger
    this.personAddresses.push(this.createAddress());
  }


  deleteAddress(i) {
    this.personAddresses.removeAt(i);
  }
}

и вот html формы: 

<br>


  <form  [formGroup]="myForm">
           Value: {{myForm.value | json}}
    <hr><br>

       <mat-form-field >
       <mat-label>FIRST NAME</mat-label>
        <input  maxlength="10" matInput #input placeholder="name" formControlName="personName">
       </mat-form-field >

      <mat-form-field >
      <input matInput maxlength="10" placeholder="password" formControlName="personPassword">
       </mat-form-field>

       <mat-form-field>
       <input matInput maxlength="10" placeholder="age" formControlName="personAge">
       </mat-form-field>

       <mat-form-field>
       <input [class.is-invalid]="myForm.get('personCity').invalid && myForm.get('personCity').touched" matInput maxlength="10" placeholder="city" formControlName="personCity">
       <!--   <small [class.d-none]="myForm.get('personCity').valid && myForm.get('personCity').untouched"  class="text-danger">city is required</small>-->
       </mat-form-field>

  <div formArrayName="personAddresses"  *ngFor="let Address of personAddresses.controls; let i=index">

        <mat-form-field>
          <input matInput type="text"  placeholder="street"   [formControlName]="'street'+i">
         </mat-form-field>
         <mat-form-field>
           <input matInput type="text" class="mat-form-field" placeholder="number" formControlName="number"[formControlName]="'numbrt'+i" >
          </mat-form-field>
          <mat-form-field>
          <input matInput type="text" class="mat-form-field" placeholder="postalCode" formControlName="postalCode" [formControlName]="'cod'+i">
          </mat-form-field>

    <button mat-raised-button color="warn" (click)="deleteAddress(i)">DELETE</button>


  </div>

  <br><br>
     <button (click)="addAddress()" mat-raised-button  type="button">Add Address</button>
     <button class="mat-primary" mat-raised-button type="submit" >DONE</button>
     <button (click)="loadApiData()" mat-raised-button type="button" >LOAD API DATA</button>


</form>
...