我有一个问题。这是我的代码:
<ion-content>
<form
novalidate
[formGroup]="clientForm"
(ngSubmit)="saveClient()"
>
<ion-list>
<ion-item >
<ion-label position="stacked">Nombre </ion-label>
<ion-input
formControlName="client_name"
placeholder="Nombre..."
></ion-input>
</ion-item>
<ion-item>
<ion-label position="stacked">Apellidos </ion-label>
<ion-input
formControlName="client_lastname"
placeholder="Apellidos..."
></ion-input>
</ion-item>
<ion-item>
<ion-label position="stacked">Teléfono </ion-label>
<ion-input
formControlName="client_phone"
placeholder="Teléfono..."
type="number"
></ion-input>
</ion-item>
<ion-item>
<ion-label position="stacked">Email *</ion-label>
<ion-input
formControlName="client_email"
placeholder="Email"
type="email"
></ion-input>
</ion-item>
<ion-item>
<ion-label position="stacked">Tipo de cliente</ion-label>
<ion-select placeholder="Tipo de cliente" formControlName="acl_level">
<ion-select-option value="1">Cliente</ion-select-option>
<ion-select-option value="2">Colaborador</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
</form>
</ion-content>
这是我在组件中函数:
import { Component, Input, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ModalController } from '@ionic/angular';
import { Clients } from '../clients-service/clients.models';
@Component({
selector: 'app-clients-form-modal',
templateUrl: './clients-form-modal.component.html',
styleUrls: ['./clients-form-modal.component.scss'],
})
export class ClientsFormModalComponent implements OnInit {
@Input() client: Clients;
@Input() action : string;
clientForm: FormGroup;
constructor(
private modalCtrl: ModalController,
private formBuilder: FormBuilder)
{ }
ngOnInit() {
this.generateForm();
}
dismissModal() {
this.modalCtrl.dismiss();
}
saveClient() {
console.log(this.clientForm.value)
if (this.clientForm.valid) {
this.modalCtrl.dismiss(this.clientForm.value);
}
}
private generateForm() {
this.clientForm = this.formBuilder.group({
client_id: [''],
client_name: ['2222',Validators.required],
client_lastname: ['2222',Validators.required],
client_email: ['2222@222.com',[Validators.required, Validators.email]],
client_phone: ['222',Validators.required],
acl_level: ['22',Validators.required],
});
console.log("value");
console.log(this.clientForm.valid)
console.log(this.clientForm.value)
}
}
我也在模块中加载了import { ReactiveFormsModule } from '@angular/forms';
。
但是当我打印表单时,每个输入都是空的,当我提交表单时,要发送的值也是空的console.log("value")
和console.log(this.clientForm.valid)
打印正确匹配。
任何人都可以帮助我吗?我不明白,我在其他项目中创建了其他形式,从来没有这个问题。
1条答案
按热度按时间shstlldc1#
我已经创建了一个与离子和Angular 兼容的StackBlitz,可能有助于解决这个特定的问题。看看here。
我对控件的命名约定做了一些更改,从snake_case更改为camelCase,但不确定这是否与此有关。
我已经从模板文件中去掉了ngSubmit(),取而代之的是添加了一个提交按钮,并将其连接到您已有的提交函数上。有人告诉我不要在React式表单上使用ngSubmit。但我没有证据证明为什么应该或不应该使用ngSubmit。
最后,我添加并修改了变量访问修饰符。
第一个
希望这能有所帮助!