angular - 将 ng-select 与 formControlName 一起使用时不显示占位符
问题描述
当我将 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=""PLACEHOLDER_1427118222253"" 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>
如果我撤回 formControlName,占位符工作
打字稿:
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,因为那是我所有的验证。我已经尝试了几种方法来使这个选择工作,但没有什么是正确的
感谢帮助
解决方案
当我在表单生成器中使用 null 而不是 "" 时,我的问题已解决
用这个
this.form = this.formBuilder.group({
name: [null, [Validators.required, Validators.minLength(3)]]
});
代替
this.form = this.formBuilder.group({
name: ["", [Validators.required, Validators.minLength(3)]]
});
推荐阅读
- regexp-replace - 用于替换组内换行符的 REGEX 策略
- python - Python - 没有重复的列表列表的所有组合
- python - Discord 机器人代码在移动到新电脑后已损坏
- azure - Azure 数据工厂 ADF - 在数据流 > 源选项 > 完成后参数化从文件路径和到文件路径
- wso2 - 如何在 wso2 esb 中按一个顺序调用两个端点?
- reactjs - 为什么我的 usestate 挂钩值在 onClick 事件之后没有更新而完全没有错误?
- java - 计算复多项式的值
- python - 如何有效地在 Scipy 中生成正常的随机变量 >= 零?
- php - 尝试通过 Laravel 中的一对多关系输出文件名
- html - CSS 格式化一个元素到外面但仍然与父 div 相关