我是Angular 6的新手,我正在开展一个项目,我正在使用具有反应形式的材料设计,使用表单控件 . 所以我面临的问题是除了mat-select之外所有其他字段都正常工作,它正确显示下拉内容,但是当我选择它时,所选值不会反映在表单控件中 . mat-select数据来自后端
这是我的HTML代码:
<mat-form-field class="example-full-width">
<mat-select placeholder="Source City" formControlName="sourceCityControl" required [errorStateMatcher]="matcher">
<mat-option *ngFor="let city of cities" [value]="city">
{{city.name}}
</mat-option>
</mat-select>
<mat-error>
Source City <strong> Required </strong>
</mat-error>
</mat-form-field>
<br> <br>
<mat-form-field class="example-full-width">
<mat-select placeholder="Destination City" formControlName="destinationCityControl" required [errorStateMatcher]="matcher">
<mat-option *ngFor="let city of cities" [value]="city">
{{city.name}}
</mat-option>
</mat-select>
<mat-error>
Destination City <strong> Required </strong>
</mat-error>
</mat-form-field>
<!-- other form elements -->
<!-- to check form elements -->
{{profileForm.value | json}}
这是我的TypeScript文件代码:
public cities = [];
minDate = new Date();
nextdate = this.minDate.getUTCDate();
nextmonth = this.minDate.getUTCMonth();
nextyear = this.minDate.getFullYear();
maxDate = new Date(this.nextyear, this.nextmonth + 1, this.nextdate);
host: Oldoffer;
offerModel: any;
matcher = new MyErrorStateMatcher();
constructor(private fb: FormBuilder, private _offerService:
OfferRideService, private router: Router, private editService: EditService)
{ }
test1: string;
test2: Date;
test3: Date;
profileForm: FormGroup;
ngOnInit() {
console.log(this.nextdate);
this._offerService.getCities().subscribe(data => this.cities = data);
this.editService.getHost().subscribe((data) => {
this.host = data;
this.test1 = this.host.date.toString();
this.test2 = new Date(this.test1.slice(0, 19) + 'Z');
this.test3 = new Date(this.test2.getFullYear(), this.test2.getUTCMonth(),
this.test2.getUTCDate())
this.profileForm = new FormGroup({
sourceCityControl: new FormControl('', Validators.required),
destinationCityControl: new FormControl('', Validators.required),
dateControl: new FormControl(this.test3, Validators.required),
seatsControl: new FormControl(this.host.noOfSeats, [Validators.required,
Validators.min(1), Validators.max(4)]),
amountControl: new FormControl(this.host.amount, [Validators.required,
Validators.min(0), Validators.max(2000)]),
acControl: new FormControl(this.host.preference.ac),
musicControl: new FormControl(this.host.preference.music),
smokingControl: new FormControl(this.host.preference.smoking),
petsControl: new FormControl(this.host.preference.pets)
});
})
}//other code omitted
任何帮助和建议?谢谢 ...
1 回答
我把你的问题复制到它's simplest form and here'你错过了什么:你可能错过了其他formContorls的
<form>
元素,所以请确保你始终关注控制台 . 它's gonna be your best friend if you'重新出现角度 . 在构建FormGroups时,请查看它的文档,因为这不是一个好方法 .只需按照我为您构建的示例,它应该可以解决您的问题:https://stackblitz.com/edit/angular-nbihkv