Как автоматически загрузить / автоматически заполнить тег выбора значением - PullRequest
Новая
       30

Как автоматически загрузить / автоматически заполнить тег выбора значением

0 голосов
/ 10 октября 2019

Я новичок в ngModels / ngForms и столкнулся с этой проблемой:

Я пытаюсь загрузить «Обновить страницу пользователя», и все из учетной записи пользователя загружается, кроме выпадающего /выберите значения тега. Как я могу поставить значение «по умолчанию» или предварительно загруженное значение?

пс. Я также борюсь с тем, чтобы загруженные значения были распознаны как фактические значения, введенные как загрузка, но моя требуемая ошибка все еще появляется.

Я пробовал [value] = "1" и выбрал и выбрал = "selected" и selected = "1" 

    <div class="container">

   <div *ngFor='let User of GUser$'>
   <div style="width: 30%; align-content: center;">
  <h2>Update Account Details:</h2>
  <form #form="ngForm" (ngSubmit)="submit()">
    <br>
    <label>FirstName: </label>
    <input name="f" #fName="ngModel" [(ngModel)]="FirstName" 
    (input)="FirstName=$event.target.value" type="text"
      class="form-control" required pattern="^[a-zA-Z ]*$" maxlength="20" 
     value="{{User.UserName}}">
    <div class="validation-error" *ngIf="fName.invalid && 
    fName.touched">This field is required!</div>

    <label>Surname: </label>
    <input name="s" #SName="ngModel" [(ngModel)]="Surname" 
    (input)="Surname=$event.target.value" type="text"
      class="form-control" required pattern="^[a-zA-Z ]*$" maxlength="20" 
     value="{{User.UserSurname}}">
    <div class="validation-error" *ngIf="SName.invalid && 
    SName.touched">This field is required!</div>

    <label>Date of Birth: </label>
    <input name="d" #DOB="ngModel" [(ngModel)]="DateofBirth" 
    (input)="DateofBirth=$event.target.value" type="date"
      class="form-control" required pattern="^[0-9]{4}[/][0-9]{2}[/][0-9] 
    {2}$"
      value="{{User.UserDateOfBirth}}">
    <div class="validation-error" *ngIf="DOB.invalid && DOB.touched">This 
    field requires a valid date format
      (YYYY/MM/DD)</div>

    <label>Email:</label>
    <input name="e" #mail="ngModel" [(ngModel)]="Email" 
    (input)="Email=$event.target.value" type="text"
      class="form-control" required pattern="[^ @]*@[^ @]*" value=" 
    {{User.UserEmail}}">
       <div class="validation-error" *ngIf="mail.invalid && 
     mail.touched">This field requires a valid email address
      (Contain @ symbol)</div>

    <label>Contact Number: </label>
    <input name="n" #Number="ngModel" [(ngModel)]="Contact" 
    (input)="Contact=$event.target.value" type="text"
      class="form-control" required pattern="^[0-9]{10}$" value=" 
    {{User.UserContactDetails}}">
    <div class="validation-error" *ngIf="Number.invalid && 
     Number.touched">This field requires a valid phone number
      (10 Digits)</div>

    <label>Street Address: </label>
    <input name="a" #Street="ngModel" [(ngModel)]="Address" 
    (input)="Address=$event.target.value" type="text"
      class="form-control" required value="{{User.UserAddress}}">
    <div class="validation-error" *ngIf="Street.invalid && 
    Street.touched">This field is required!</div>

    <label>City: </label>
    <select [(ngModel)]="CityList" (input)="City=$event.target.value" 
    class="form-control" required>
      <option *ngFor="let prod of CityList" value={{prod.id}}> 
    {{prod.City}} </option>
    </select>
    <br>

    <label>Gender: </label>
    <select [(ngModel)]="GenderList" (input)="Gender=$event.target.value" 
    class="form-control" required >
      <option *ngFor="let prod of GenderList" value={{prod.id}} > 
    {{prod.Gender}} </option>

    </select>
    <button class="btn btn-success" style="width: 80%; text-align: 
    center" 
     type="Submit"
      [disabled]="!form.valid">Save</button>
    </form>
    </div>
   </div>
    </div>
...