IONIC学习笔记

ionic Form表单：

模板.html参考ionic docs：https://ionicframework.com/docs/developer-resources/forms/

如下：

 <form [(formGroup)]="senderF">
    <ion-item (tap)="mapSelect()">
        <ion-label>地址：</ion-label>
        <ion-input type="text" formControlName="senderAddress" readonly></ion-input>
        <ion-icon name="arrow-forward" color="light" item-right></ion-icon>
    </ion-item>
    <ion-item>
        <ion-label>楼层门牌：</ion-label>
        <ion-input type="text" formControlName="senderFloorRoom"></ion-input>
    </ion-item>
    <ion-item>
        <ion-label>姓名：</ion-label>
        <ion-input type="text" formControlName="senderName"></ion-input>
    </ion-item>
    <ion-item>
        <ion-label>电话：</ion-label>
        <ion-input type="tel" formControlName="senderPhone"></ion-input>
    </ion-item>

    <button ion-button block (click)="confirmSenderInfo()" [disabled]="!senderF.valid">确定</button>
  </form>

类文件.ts

​

export class SenderinfoPage {  
  senderF:FormGroup
  constructor(public navCtrl: NavController, public navParams: NavParams,
     public formBuilder:FormBuilder, public modalController:ModalController,
     public storage:Storage) {
      this.senderF = formBuilder.group({
      senderAddress: ['', [Validators.required]],
      senderFloorRoom:[''],
      senderName: ['', [Validators.required]],
      senderPhone:['', [Validators.required]]
    })
   /*******/
}
​

 

其中FormGroup.value是{senderAddress:'',senderFloorRoom:'',senderName:'',senderPhone:''}

在用代码给各个属性赋值时不能直接用FormGroup.value.属性名='value'，这样页面是不显示'value'的，需要使用FormGroup.setValue({senderAddress:'value1',senderFloorRoom:'value2',senderName:'value3',senderPhone:'value4'})，setValue是给所有属性赋值，给单个属性赋值使用FormGroup.patchValue({senderAddress:'value1'})