Form Group - выберите раскрывающийся список, не заполняющий, но массив показывает в консоли - PullRequest
Новая
       0

Form Group - выберите раскрывающийся список, не заполняющий, но массив показывает в консоли

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

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

Данные предоставляются методом loadOrganizations, и массив выводится на мою консоль при регистрации, как показано здесь:

enter image description here

Любые идеи о том, что я скучаю? Я переписал это дюжину раз и 16 разных способов безрезультатно.

register.component.ts 

import { Component, Output, EventEmitter, OnInit } from '@angular/core';
import { AuthService } from '../../_services/auth.service';
import { AlertifyService } from '../../_services/alertify.service';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
import { Clients } from '../../_models/clients';
import { Router } from '@angular/router';
import { Organizations } from '../../_models/organizations';
import { OrganizationService } from '../../_services/Organization.service';

@Component({
  selector: 'app-dashboard',
  templateUrl: 'register.component.html',
})
export class RegisterComponent implements OnInit {
  @Output() cancelRegister = new EventEmitter();
  client: Clients;
  organizations: Organizations;
  registerClientForm: FormGroup;
  registerOrgForm: FormGroup;

  constructor(private authService: AuthService, private alertify: AlertifyService,
    private fb: FormBuilder, private router: Router, private orgService: OrganizationService) { }

  ngOnInit() {
    this.loadOrganizations();
    this.createClientForm();
    this.createOrganizaionForm();
  }

  createClientForm() {
    this.registerClientForm = this.fb.group({
      FirstName: new FormControl('', Validators.required),
      LastName: new FormControl('', Validators.required),
      organization: new FormControl(),
      PhoneNumber: new FormControl('', Validators.required),
      Username: new FormControl('', Validators.required),
      Password: new FormControl('', Validators.required),
      ActiveDate: new FormControl(),
      EndDate: new FormControl(),
    });
  }

  loadOrganizations() {
    this.orgService.getOrganizations().subscribe((organizations: Organizations[]) => {
      organizations = organizations;
      console.log(organizations);
    }, error => {
      this.alertify.error(error);
    });
  }

  registerClient() {
    if (this.registerClientForm.valid) {
      this.client = Object.assign({}, this.registerClientForm.value);
      this.authService.register(this.client).subscribe(() => {
        this.alertify.success('Registration created successfully');
        this.router.navigate(['/manage/clients']);
      }, error => {
        this.alertify.error(error);
      });
    }
  }

  createOrganizaionForm() {
    this.registerOrgForm = this.fb.group({
      OrganizationName: new FormControl('', Validators.required),
      FirstName: new FormControl('', Validators.required),
      LastName: new FormControl('', Validators.required),
      PhoneNumber: new FormControl('', Validators.required),
      StreetAddress: new FormControl('', Validators.required),
      City: new FormControl('', Validators.required),
      State: new FormControl('', Validators.required),
      Country: new FormControl('', Validators.required),
      PostalCode: new FormControl('', Validators.required),
    });
  }

  registerOrganization() {
    if (this.registerOrgForm.valid) {
      this.organizations = Object.assign({}, this.registerOrgForm.value);
      this.orgService.CreateOrganization(this.organizations).subscribe(() => {
        this.alertify.success('Organization created successfully');
        // this.router.navigate(['/manage/clients']);
      }, error => {
        this.alertify.error(error);
      });
    }
  }

  cancel() {
    this.cancelRegister.emit(false);
    console.log('cancelled');
  }
}

полный register.component. html

<div class="row">
  <div class="col-md-12">
    <div class="card card-user">
      <tabset>
        <!-- BEGIN ORGANIZATION TAB -->
        <tab heading="Organization">
          <div class="card-header">
            <h5 class="card-title">Register New Client</h5>
          </div>
          <div class="card-body">
            <form
              [formGroup]="registerOrgForm"
              (ngSubmit)="registerOrganization()"
              enctype="multipart/form-data"
            >
              <div class="row">
                <div class="col-md-3 px-1">
                  <div class="form-group">
                    <label>Organization</label>
                    <input
                      type="text"
                      [ngClass]="{
                        'is-invalid':
                          registerOrgForm.get('OrganizationName').errors &&
                          registerOrgForm.get('OrganizationName').touched
                      }"
                      class="form-control"
                      formControlName="OrganizationName"
                      placeholder="Complete Security Ltd."
                    />
                    <div class="invalid-feedback">
                      Please enter the organization name
                    </div>
                  </div>
                </div>
                <div class="col-md-3 px-1">
                  <div class="form-group">
                    <label>Contact First Name</label>
                    <input
                      type="text"
                      [ngClass]="{
                        'is-invalid':
                          registerOrgForm.get('FirstName').errors &&
                          registerOrgForm.get('FirstName').touched
                      }"
                      formControlName="FirstName"
                      class="form-control"
                      placeholder="John"
                    />
                    <div class="invalid-feedback">
                      Please enter a contact first name
                    </div>
                  </div>
                </div>
                <div class="col-md-3 px-1">
                  <div class="form-group">
                    <label for="text">Contact Last Name</label>
                    <input
                      type="text"
                      [ngClass]="{
                        'is-invalid':
                          registerOrgForm.get('LastName').errors &&
                          registerOrgForm.get('LastName').touched
                      }"
                      formControlName="LastName"
                      class="form-control"
                      placeholder="Smith"
                    />
                    <div class="invalid-feedback">
                      Please enter a contact last name
                    </div>
                  </div>
                </div>
                <div class="col-md-3 px-1">
                  <div class="form-group">
                    <label>Phone Number</label>
                    <input
                      type="text"
                      [ngClass]="{
                        'is-invalid':
                          registerOrgForm.get('PhoneNumber').errors &&
                          registerOrgForm.get('PhoneNumber').touched
                      }"
                      formControlName="PhoneNumber"
                      class="form-control"
                      placeholder="604-929-3929"
                    />
                    <div class="invalid-feedback">
                      Please enter a phone number
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6 px-1">
                  <div class="form-group">
                    <label>Street Address</label>
                    <input
                      type="text"
                      [ngClass]="{
                        'is-invalid':
                          registerOrgForm.get('StreetAddress').errors &&
                          registerOrgForm.get('StreetAddress').touched
                      }"
                      formControlName="StreetAddress"
                      class="form-control"
                      placeholder="123 Main St"
                    />
                    <div class="invalid-feedback">
                      Please enter a street address
                    </div>
                  </div>
                </div>
                <div class="col-md-6 px-1">
                  <div class="form-group">
                    <label>City</label>
                    <input
                      type="text"
                      [ngClass]="{
                        'is-invalid':
                          registerOrgForm.get('City').errors &&
                          registerOrgForm.get('City').touched
                      }"
                      formControlName="City"
                      class="form-control"
                      placeholder="North Vanouver"
                    />
                    <div class="invalid-feedback">Please enter a city</div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-4 px-1">
                  <div class="form-group">
                    <label>State</label>
                    <input
                      type="text"
                      [ngClass]="{
                        'is-invalid':
                          registerOrgForm.get('State').errors &&
                          registerOrgForm.get('State').touched
                      }"
                      formControlName="State"
                      class="form-control"
                      placeholder="BC"
                    />
                    <div class="invalid-feedback">Please enter a state</div>
                  </div>
                </div>
                <div class="col-md-4 px-1">
                  <div class="form-group">
                    <label>Country</label>
                    <input
                      type="text"
                      [ngClass]="{
                        'is-invalid':
                          registerOrgForm.get('Country').errors &&
                          registerOrgForm.get('Country').touched
                      }"
                      formControlName="Country"
                      class="form-control"
                      placeholder="Canada"
                    />
                    <div class="invalid-feedback">Please enter a country</div>
                  </div>
                </div>
                <div class="col-md-4 px-1">
                  <div class="form-group">
                    <label>Postal Code</label>
                    <input
                      type="text"
                      [ngClass]="{
                        'is-invalid':
                          registerOrgForm.get('PostalCode').errors &&
                          registerOrgForm.get('PostalCode').touched
                      }"
                      formControlName="PostalCode"
                      class="form-control"
                      placeholder="V7H 1S6"
                    />
                    <div class="invalid-feedback">
                      Please enter a postal code
                    </div>
                  </div>
                </div>
              </div>
              <div class="card-footer">
                <button type="submit" class="btn btn-sm btn-primary">
                  <i class="fa fa-dot-circle-o"></i> Submit
                </button>
                <button
                  type="reset"
                  class="btn btn-sm btn-danger"
                  (click)="cancel()"
                >
                  <i class="fa fa-ban"></i> Cancel
                </button>
              </div>
            </form>
          </div>
        </tab>
        <!-- END ORGANIZATION TAB -->
        <!-- BGIN CLIENT TAB -->
        <tab heading="Client">
          <div class="card-header">
            <h5 class="card-title">Register New Client</h5>
          </div>
          <div class="card-body">
            <form
              [formGroup]="registerClientForm"
              (ngSubmit)="registerClient()"
              enctype="multipart/form-data"
            >
              <div class="row">
                <div class="col-md-4 px-1">
                  <div class="form-group">
                    <label>Contact First Name</label>
                    <input
                      type="text"
                      [ngClass]="{
                        'is-invalid':
                          registerClientForm.get('FirstName').errors &&
                          registerClientForm.get('FirstName').touched
                      }"
                      formControlName="FirstName"
                      class="form-control"
                      placeholder="John"
                    />
                    <div class="invalid-feedback">
                      Please enter a contact first name
                    </div>
                  </div>
                </div>
                <div class="col-md-4 px-1">
                  <div class="form-group">
                    <label for="text">Contact Last Name</label>
                    <input
                      type="text"
                      [ngClass]="{
                        'is-invalid':
                          registerClientForm.get('LastName').errors &&
                          registerClientForm.get('LastName').touched
                      }"
                      formControlName="LastName"
                      class="form-control"
                      placeholder="Smith"
                    />
                    <div class="invalid-feedback">
                      Please enter a contact last name
                    </div>
                  </div>
                </div>
                <div class="col-md-4 px-1">
                  <div class="form-group">
                    <label>Organization</label>
                    <select
                      id="OrganizationName"
                      class="form-control"
                      formControlName="organization">
                      <option
                        *ngFor="let organization of organizations"
                        [value]="organization.id">
                        {{ organization.organizationName }}
                      </option>
                    </select>
                    <div class="invalid-feedback">
                      Please select the organization this user will belong to
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-4 px-1">
                  <div class="form-group">
                    <label>Phone Number</label>
                    <input
                      type="text"
                      [ngClass]="{
                        'is-invalid':
                          registerClientForm.get('PhoneNumber').errors &&
                          registerClientForm.get('PhoneNumber').touched
                      }"
                      formControlName="PhoneNumber"
                      class="form-control"
                      placeholder="604-929-3929"
                    />
                    <div class="invalid-feedback">
                      Please enter a phone number
                    </div>
                  </div>
                </div>
                <div class="col-md-4 px-1">
                  <div class="form-group">
                    <label>Email Address (Username)</label>
                    <input
                      type="text"
                      [ngClass]="{
                        'is-invalid':
                          registerClientForm.get('Username').errors &&
                          registerClientForm.get('Username').touched
                      }"
                      formControlName="Username"
                      class="form-control"
                      placeholder="user@email.com"
                    />
                    <div class="invalid-feedback">
                      Please enter the users email address
                    </div>
                  </div>
                </div>
                <div class="col-md-4 px-1">
                  <div class="form-group">
                    <label>Temporary Password</label>
                    <input
                      type="password"
                      [ngClass]="{
                        'is-invalid':
                          registerClientForm.get('Password').errors &&
                          registerClientForm.get('Password').touched
                      }"
                      formControlName="Password"
                      class="form-control"
                      placeholder="Password"
                      autocomplete="Create Password"
                    />
                    <div class="invalid-feedback">Please enter a password</div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6 px-1">
                  <div class="form-group">
                    <label>Start Date</label>
                    <input
                      formControlName="ActiveDate"
                      type="date"
                      class="form-control"
                    />
                  </div>
                </div>
                <div class="col-md-6 px-1">
                  <div class="form-group">
                    <label>End Date</label>
                    <input
                      formControlName="EndDate"
                      type="date"
                      class="form-control"
                    />
                  </div>
                </div>
              </div>
              <div class="card-footer">
                <button type="submit" class="btn btn-sm btn-primary">
                  <i class="fa fa-dot-circle-o"></i> Submit
                </button>
                <button
                  type="reset"
                  class="btn btn-sm btn-danger"
                  (click)="cancel()"
                >
                  <i class="fa fa-ban"></i> Cancel
                </button>
              </div>
            </form>
          </div>
        </tab>
        <!-- END CLIENT TAB -->
      </tabset>
    </div>
  </div>
</div>

соответствующий раздел register.compon enet. html 

<div class="col-md-4 px-1">
                  <div class="form-group">
                    <label>Organization</label>
                    <select
                      id="OrganizationName"
                      class="form-control"
                      formControlName="organization">
                      <option
                        *ngFor="let organization of organizations"
                        [value]="organization.id">
                        {{ organizations.organizationName }}
                      </option>
                    </select>
                    <div class="invalid-feedback">
                      Please select the organization this user will belong to
                    </div>
                  </div>
                </div>

Ответы [ 2 ]

1 голос
/ 09 января 2020 
    You have an issue in following part:

    loadOrganizations() {
        this.orgService.getOrganizations().subscribe((organizations: Organizations[]) => {
          **organizations = organizations;**
          console.log(organizations);
        }, error => {
          this.alertify.error(error);
        });
      }

Declare first of all organizationsData: Organizations[]; Then, Instead of assigning in same variable try to use another variable like this.organizationsData = organizations;

Use this variable (organizationsData) in ngFor. That may fix your issue.
0 голосов
/ 09 января 2020

Изменение:

  • organizations: Organizations; на organizations: Organizations[];

  • {{ organizations.organizationName }} на {{ organization.organizationName }}

Попробуйте вот так: 

 <option *ngFor="let organization of organizations" [value]="organization.id">
    {{ organization.organizationName }}
 </option>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...