Заполнитель не отображается при использовании ng-select с formControlName - PullRequest
Новая
       16

Заполнитель не отображается при использовании ng-select с formControlName

0 голосов
/ 18 сентября 2018

Когда я помещаю formControlName в свой div, заполнитель не отображается, но, когда я его выставляю, отображается заполнитель.

HTML: 

    <div class="form-group" [ngClass]="applyCssError('dropdown')">
   <select (change)="selectedChange($event)" formControlName="dropdown" class="custom-select form-control" id="dropdown">
    <option class="dropdown-placeholder" value="&quot;PLACEHOLDER_1427118222253&quot;" style="color: rgb(51, 51, 51); display: none;">Select a Challenge</option>
    <option value="1">Copenhagen - 2018</option>
    <option value="2">Paris - 2018</option>
  </select>
        <div class="col-sm-12">
            <app-field-control-error
            [showError]="verifyValidTouched('dropdown')"
            msgError="Dropdown Required">
            </app-field-control-error>
        </div>
  </div>

ifЯ снимаю formControlName, заполнитель работает

TYPESCRIPT: 

import { Http } from '@angular/http';
import { FormGroup, FormBuilder, Validators, FormControl } from 
'@angular/forms';
import { Component, OnInit } from '@angular/core';
import 'rxjs/add/operator/map';
import { IMyDpOptions } from 'mydatepicker';
import { SelectItem } from 'primeng/api';

@component({
selector: 'app-form-challenge',
templateUrl: './form-challenge.component.html',
styleUrls: ['./form-challenge.component.css']
})
export class FormChallengeComponent implements OnInit {

private selectUndefinedOptionValue: any;

public myDatePickerOptions: IMyDpOptions = {
dateFormat: 'mm.dd.yyyy'
};

selectedChallenge: '';

form: FormGroup;

constructor(
private formBuilder: FormBuilder,
private http: Http,
) { }

ngOnInit() {
this.form = this.formBuilder.group({
dropdown: [null, Validators.required],
name: [null, [Validators.required, Validators.minLength(3),             
Validators.maxLength(30)]],
phone: [null, Validators.required],
email: [null, [Validators.required, Validators.email]],
company: [null, Validators.required],
dateincorporation: [null, Validators.required],
companyAddress: [null, Validators.required],
vat: null,
mensage: [null, Validators.required],
website: [null, Validators.required],
video: null
});
}

onSubmit() {
console.log(this.form.value);

if (this.form.valid) {

this.http.post('https://httpbin.org/post', JSON.stringify(this.form.value))
.map(res => res)
.subscribe(dados => {
console.log(dados);
this.form.reset();
}); 
} else {
console.log('formulario invalido');
Object.keys(this.form.controls).forEach(field => {
console.log(field);
const control = this.form.get(field);
control.markAsDirty();
});
}
}

verifyValidTouched(field) {
return !this.form.get(field).valid && (this.form.get(field).touched ||             
this.form.get(field).dirty);
}

applyCssError(field) {
return {
'has-error': this.verifyValidTouched(field),
'has-feedback': this.verifyValidTouched(field)
};
}

setDate(): void {
const date = new Date();
this.form.patchValue({dateincorporation: {
date: {
year: date.getFullYear(),
month: date.getMonth() + 1,
day: date.getDate()
}
}});
}

clearDate(): void {
this.form.patchValue({myDate: null});
}

selectedChange(event: any) {
this.selectedChallenge = event.target.value;
console.log(this.selectedChallenge);
}

}

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

Спасибо за помощь

Ответы [ 2 ]

0 голосов
/ 18 сентября 2018

у вас есть проблемы:

  1. вы забыли поместить FormGroup в свой код, formControlName должен использоваться с родителем директива formGroup

  2. set '-1' instated value = "" PLACEHOLDER_1427118222253 "" => value = "- 1"

  3. наконец-то установил '-1' в .ts instated 'null' => раскрывающийся список: ["-1", Validators.required]

пожалуйста, измените ваш код следующим образом: 

  <div class="form-group" [ngClass]="applyCssError('dropdown')" [formGroup]="form"> 
     <select formControlName="dropdown" class="custom-select form-control" 
      id="dropdown">
    <option class="dropdown-placeholder" value="-1" style="color: rgb(51, 51, 51); 
    display: none;">Select a Challenge</option>
   <option  value="1">Copenhagen - 2018</option>
   <option  value="2">Paris - 2018</option>
  </select>
 </div>

и изменить .ts, как следующие коды: 

   this.form = this.formBuilder.group({
  dropdown: ["-1", Validators.required],
  name: [null, [Validators.required, Validators.minLength(3),
  Validators.maxLength(30)]],
  phone: [null, Validators.required],
  email: [null, [Validators.required, Validators.email]],
  company: [null, Validators.required],
  dateincorporation: [null, Validators.required],
  companyAddress: [null, Validators.required],
  vat: null,
  mensage: [null, Validators.required],
  website: [null, Validators.required],
  video: null
});
0 голосов
/ 18 сентября 2018

Удалить параметр «Показывать нет снизу».

<select (change)="selectedChange($event)" formControlName="dropdown" class="custom-select form-control" id="dropdown">
    <option class="dropdown-placeholder" value="&quot;PLACEHOLDER_1427118222253&quot;" style="color: rgb(51, 51, 51);">Select a Challenge</option>
    <option value="1">Copenhagen - 2018</option>
    <option value="2">Paris - 2018</option>
  </select>

Спасибо !!

...