угловая настройка поля со списком для получения значения с помощью formControlname - PullRequest
0 голосов
/ 30 октября 2019

Я использовал https://stackblitz.com/edit/angular-combobox-autocomplete для создания выпадающего списка. Я успешно реализовал это в своем приложении.

Но я сталкиваюсь с несколькими проблемами, настраивая его, так как мне нужно, чтобы мало чего нужно было реализовать вthis

1) Я интегрирую этот комбинированный список в форму, в которой я использую formGroup и formControlName с каждым полем ввода для проверки и получения значения определенного поля

Как, например, давайте покажем мне мой код,У меня есть один HTML-файл, где мои поля формы похожи на это. Меня интересует, как использовать formControlName в компоненте app-combo-box. Поскольку я не могу получить выбранную организацию или идентификатор в моем formBuilder или каким-либо другим способом, чтобы я мог получить название выбранной страны или Id

         <form  [formGroup]="orgViewUpdateform" class="orgAddPanel" (ngSubmit)="onSubmit()"  >

              <div class="col-md-12 col-sm-12 col-lg-12">
                <div>
                  <div class="col-md-12 col-sm-12 col-lg-12  orgdetailblk">
                      <div class="row">
                        <div class="col-sm-12 orgdetail1">Name of the organisation</div>
                        <div class="col-sm-12 orgdetail2">
                          <mat-form-field>
                          <input matInput type="text" placeholder="" formControlName="organisation_name" 
                          class="form-control secondinput"  id="organisation_name" [ngClass]="{ 'is-invalid': submitted && f.organisation_name.errors }"
                          value="{{organisationRecord?.organisation_name}}">
                          <div *ngIf="submitted && f.organisation_name.errors" class="invalid-feedback">
                            <mat-error *ngIf="f.organisation_name.errors.required">Field is required</mat-error>
                            <mat-error *ngIf="f.organisation_name.errors.minlength">atleast 2 characters required</mat-error>
                            <mat-error *ngIf="f.organisation_name.errors.maxlength">max 255 characters allowed</mat-error>
                          </div>
                        </mat-form-field>
                      </div>
                      </div>
                    </div>


                  <div class="col-md-12 col-sm-12 col-lg-12">
                  <div class="row">
                  <div class="col-md-5 col-sm-5 col-lg-5 orgdetailblk cntry">

                        <div class="col-sm-12 orgdetail1 ">Country</div>
                        <div class="col-sm-12 orgdetail2"> 
                          <app-combo-box  [list]="countryNames"></app-combo-box>


                          </div>

                    </div>
                    <div class="col-md-2 col-sm-2 col-lg-2"></div>

                    </div>

                  </div>



                  <div class="col-md-12 col-sm-12 col-lg-12">
                    <div class="row">

                      <div class="col-sm-12 organisation">
                        <span class="orgedit">
                            <button  type="reset" (click)="onReset()">Cancel</button>
                            <button  mat-button >Save</button>
                        </span>
                      </div>
                    </div>
                  </div>

                </div>
              </div>
            </form>

Это мой код .ts файла, где я использую formBuilder

              this.orgViewUpdateform = this.formBuilder.group({
    organisation_name: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(255)]],
      organisation_country: []
  });


  onSubmit() {

  this.submitted = true;

  // stop here if form is invalid
  if (this.orgViewUpdateform.invalid) {
      return;
  }

    this.organisationService.create(this.orgViewUpdateform.value).subscribe(
        success => {
          alert('org added successfully');
        },
        error => {

        },
    );


  // display form values on success
  // alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.orgViewUpdateform.value, null, 4));
}

Теперь мне нужно получить поле organisation_country в this.orgViewUpdateform.value. Пожалуйста, дайте мне знать, если требуется какая-либо другая информация. Заранее спасибо

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