Как добиться двухстороннего связывания данных для отображения данных, хранящихся в локальном хранилище, на входе, заполненном в формате HTML? - PullRequest
Новая
       1

Как добиться двухстороннего связывания данных для отображения данных, хранящихся в локальном хранилище, на входе, заполненном в формате HTML?

0 голосов
/ 13 июня 2018

Я получил все данные из API регистрации, я хочу, чтобы соответствующие поля на странице были по умолчанию выделены данными страницы регистрации (Имя, Фамилия, Электронная почта, Номер телефона).Буду очень признателен, если кто-нибудь может помочь мне с этим.Ниже приведены мои коды html, component.ts и services.ts. 

    **accountinfo.component.html**

    <div class="card card-blur">
      <div class="card-header">
        <p>ACCOUNT INFORMATION</p>
      </div>
      <div class="card-body">
          <div class="row">
              <div class="col-md-3">
                <p>Profile Image</p>
                <img src="/assets/icon/student.svg" style="width:80%">
              </div>
              <div class="col-md-9">
                <ul style="margin-top:20px;">
                  <ul style="margin-top:20px;">
                    <li>Take picture of id from your phone or mobile camera</li>

                  </ul>
                </ul>

              </div>
          </div>
     <form #f="ngForm" (submit)="submit()">
        <fieldset>
        <div class="row form-inline">
          <div class="col-md-6">
          <div class="form-group">
            <div class="col-md-3">
              <label for="fname">First Name</label>
            </div>
            <div class="col-md-9">
            <input ngModel name="FirstName" type="text" class="form-control" id="fname" placeholder="First Name">
          </div>
          </div>

              <input type="email" class="form-control" ngModel name="Email" id="email" placeholder="Enter email">
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-group">
            <div class="col-md-3">
              <label for="pnumber">Phone Number</label>
            </div>
            <div class="col-md-9">
              <input type="text" class="form-control" (keypress)="onlyNumberKey($event)" ngModel name="PhoneNumber" id="pnumber" placeholder="Phone Number"minlength="10" maxlength="10">
            </div>

  ngOnInit() {
    this.accountInfo = JSON.parse(localStorage.getItem('userDetails'));
    console.log(this.accountInfo.CandidateID);

  }

  submit() {

    var updateProfile = {

      ProfilePic:"Photo",
    }
    console.log(updateProfile);
    this.acinfo.accountDetails(updateProfile).subscribe(data => {
      console.log(data);
    });
  }

}

Ответы [ 3 ]

0 голосов
/ 13 июня 2018

Поскольку вы используете Template driven form подход, вам нужно использовать банановый синтаксис [(ngModel)]="propertyname"

, поэтому ваш код должен быть таким, где вы хотите выполнить связывание с элементами управления вводом 

  <input [(ngModel)]= " this.accountInfo && this.accountInfo.FirstName" 
    name="FirstName" type="text" class="form-control" id="fname" placeholder="First Name">

Подробнее здесь: Двухстороннее связывание ([(...)])

0 голосов
/ 13 июня 2018

Я переписываю весь код, на случай, если вам интересно 

<div class="card card-blur">
  <div class="card-header">
    <p>ACCOUNT INFORMATION</p>
  </div>
  <div class="card-body">
      <div class="row">
          <div class="col-md-3">
            <p>Profile Image</p>
            <img src="/assets/icon/student.svg" style="width:80%">
          </div>
          <div class="col-md-9">
            <ul style="margin-top:20px;">
              <ul style="margin-top:20px;">
                <li>Take picture of id from your phone or mobile camera</li>

              </ul>
            </ul>

          </div>
      </div>
 <form #f="ngForm" (submit)="submit()">
    <fieldset>
    <div class="row form-inline">
      <div class="col-md-6">
      <div class="form-group">
        <div class="col-md-3">
          <label for="fname">First Name</label>
        </div>
        <div class="col-md-9">
        <input [(ngModel)]="firstName" name="FirstName" type="text" class="form-control" id="fname" placeholder="First Name">
      </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <div class="col-md-3">
          <label for="lname">Last Name</label>
        </div>
        <div class="col-md-9">
          <input type="text" class="form-control" [(ngModel)]="lastName" name="LastName" id="lname" placeholder="Last Name">
        </div>
      </div>
    </div>
  </div>


  <br/>
  <div class="row form-inline">
    <div class="col-md-6">
      <div class="form-group">
        <div class="col-md-3">
          <label for="email">Email </label>
        </div>
        <div class="col-md-9">
          <input type="email" class="form-control" [(ngModel)]="emailID" name="Email" id="email" placeholder="Enter email">
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <div class="col-md-3">
          <label for="pnumber">Phone Number</label>
        </div>
        <div class="col-md-9">
          <input type="text" class="form-control" (keypress)="onlyNumberKey($event)" [(ngModel)]="phoneNumber" name="PhoneNumber" id="pnumber" placeholder="Phone Number"minlength="10" maxlength="10">
        </div>
      </div>
    </div>
  </div>
  <br/>
  <div class="row form-inline">
    <div class="col-md-6">
      <div class="form-group">
        <div class="col-md-3">
        <label for="tzone">Time Zone</label>
        </div>
        <div class="col-md-9">
        <select class="form-control" id="tzone" [(ngModel)]="timeZone" name="TimeZone" >
          <option ngValue="1">1</option>
          <option ngValue="2">2</option>
          <option ngValue="3">3</option>
          <option ngValue="4">4</option>
          <option ngValue="5">5</option>
        </select>
      </div>
      </div>
    </div>
  </div>
    </fieldset>
  <button type="submit" class="btn btn-primary btn-sm" style="width:5em">Update</button>
  </form>

</div>
<!-- {{f.value | json}} -->
</div>

И для ts: 

accountinfo.component.ts

import { Component, ViewChild, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { accountInfo } from './accountinfo.service';

@Component({
  selector: 'app-accountinfo',
  templateUrl: './accountinfo.component.html',
  styleUrls: ['./accountinfo.component.scss']
})
export class AccountinfoComponent implements OnInit {
  @ViewChild("f")
  form: NgForm;
  accountInfo;

  constructor( private httpClient: HttpClient, private acinfo: accountInfo) { }

  onlyNumberKey(event: KeyboardEvent) {
    // returns number from keyboard
    if (event.charCode !== undefined) {
      return event.charCode == 8 || event.charCode == 0
        ? null
        : event.charCode >= 48 && event.charCode <= 57;
    } else {
      return event.keyCode == 8 || event.keyCode == 0
        ? null
        : event.keyCode >= 48 && event.keyCode <= 57;
    }
  }

  ngOnInit() {
    this.firstName="";
    this.lastName="";
    this.emailID = "";
    this.contactNumber = "";
    this.timeZone = "";
    this.accountInfo = JSON.parse(localStorage.getItem('userDetails'));
    console.log(this.accountInfo.CandidateID);

  }

  submit() {

    var updateProfile = {

      CandidateID:this.accountInfo.CandidateID,
      this.firstName:this.form.value.FirstName,
      this.lastName:this.form.value.LastName,
      BirthDate:"07/11/1995",
      this.contactNumber:"2798349038",
      this.emailID: this.form.value.Email,
      this.timeZone:"1",
      UniversityName:"VTU",
      Campus:"Ftu",
      ProfilePic:"Photo",
      LatLon:"1231",
      IPAddress:"122323",
      Country:"Country",
      State:"State",
      City:"City",
      ContactISDCode:"91",
      CountryCode:"IN",
      IsDesktop:"true",
    }
    console.log(updateProfile);
    this.acinfo.accountDetails(updateProfile).subscribe(data => {
      console.log(data);
    });
  }
}

Это займет все необходимые значения, хранящиеся в локальном хранилище иотобразит данные на вашей веб-странице.

Надеюсь, это поможет.

0 голосов
/ 13 июня 2018

Вы можете использовать [(ngModel)] для двухсторонней привязки.

Я возьму пример имени для привязки.

В HTML: <input [(ngModel)]="FirstName" name="FirstName" type="text" class="form-control" id="fname" placeholder="First Name">

Определить вкласс: FirstName:string

После того, как вы получили значения: this.FirstName = this.accountInfo.FirstName

и работа выполнена!Я надеюсь, что это поможет вам.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...