绑定json - formgroup

Question

I have a form and I want to display data that comes from an API (JSon file) in mode readonly. Do you have tracks? I take an example of a form: Thank you

<div class="col-sm-8 col-sm-offset-2">
  <form [formGroup]="userForm" (ngSubmit)="onSubmitForm()">
    <div class="form-group">
      <label for="firstName">Prénom</label>
      <input type="text" id="firstName" class="form-control" formControlName="firstName">
    </div>
    <div class="form-group">
      <label for="lastName">Nom</label>
      <input type="text" id="lastName" class="form-control" formControlName="lastName">
    </div>
    <div class="form-group">
      <label for="email">Adresse e-mail</label>
      <input type="text" id="email" class="form-control" formControlName="email">
    </div>
    <div class="form-group">
      <label for="email">Adresse address</label>
      <input type="text" id="address" class="form-control" formControlName="address">
    </div>
    <button type="submit" class="btn btn-primary">Soumettre</button>
  </form>
</div>

File JSON

User:
    - User1:
        firstName: toto
        lastName: titi
        email: toto@toto.com
        address: 2 rue titi

Answer 1

In your component (.ts file), as soon as the data comes back (typically inside of your ngOnInit), you should be able to do this.userForm.setValue(data) .

As for making them readonly, an easy way I know is to set the FormGroup as disabled when you create it. So userForm = new FormGroup({_property_names_}, { disabled: true }) .