Ionic 离子表单不生成值表单ControlName

fiei3ece  于 2022-12-09  发布在  Ionic
关注(0)|答案(1)|浏览(110)

我有一个问题。这是我的代码:

<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)打印正确匹配。
任何人都可以帮助我吗?我不明白,我在其他项目中创建了其他形式,从来没有这个问题。

shstlldc

shstlldc1#

我已经创建了一个与离子和Angular 兼容的StackBlitz,可能有助于解决这个特定的问题。看看here
我对控件的命名约定做了一些更改,从snake_case更改为camelCase,但不确定这是否与此有关。
我已经从模板文件中去掉了ngSubmit(),取而代之的是添加了一个提交按钮,并将其连接到您已有的提交函数上。有人告诉我不要在React式表单上使用ngSubmit。但我没有证据证明为什么应该或不应该使用ngSubmit。
最后,我添加并修改了变量访问修饰符。
第一个
希望这能有所帮助!

相关问题