ionic 4 表​​单控件问题未显示输入值

Question

Ionic 4 不显示输入中的值。我的表单中有 4 个字段。2 被禁用。但我需要在修复输入中显示一些价值。这是我的代码

<form [formGroup]="ionicForm" (ngSubmit)="submitForm()" novalidate>

    <ion-item>
      <ion-input  type="text" formControlName="username"></ion-input>
    </ion-item>

    <ion-item>
      <ion-input  type="text" formControlName="email"></ion-input>

    </ion-item>

    <ion-item>
      <ion-input placeholder="Phone" type="number" formControlName="number"></ion-input>
      <ion-icon name="call" slot="end" color="primary"></ion-icon>
    </ion-item>
     <span class="error ion-padding" *ngIf="isSubmitted && errorControl.number.errors?.required">
      Please enter your 11 digit number
    </span>

  <ion-item>
    <ion-label style="color: #1d808c">Select Operator</ion-label>
    <ion-select formControlName="operator">
      <ion-select-option value="Telenor">Telenor</ion-select-option>
      <ion-select-option value="Jazz">Jazz</ion-select-option>
      <ion-select-option value="Warid">Warid</ion-select-option>
      <ion-select-option value="Ufone">Ufone</ion-select-option>
      <ion-select-option value="Zong">Zong</ion-select-option>
    </ion-select>
  </ion-item>
     <span class="error ion-padding" *ngIf="isSubmitted && errorControl.operator.errors?.required">
      Please select operator
    </span>
</form>
</ion-card>

<div style="display: flex; justify-content: center;">
  <ion-button expand="block" class="btn" fill="outline" type="submit" (click)="submitForm()">Save</ion-button>
</div>

正如表格第一个 2 值一样，我已禁用它并显示一些值，但它显示错误Cannot read property 'get' of undefined

这是我的 .ts 代码

ngOnInit() {

    //Get user
  this.auth.getUserData().subscribe((data:any) => {
      console.log('home');
      console.log(data);
      this.data = data;

    this.ionicForm = this.formBuilder.group({
      number: ['', [Validators.required, Validators.minLength(11)]],
      operator: ['', [Validators.required]],
      username: [{value: this.data.username, disabled: true}], //here is problem
      email: [{value: this.data.email, disabled: true}],     

    })

  });


}

如果我像这样硬编码值，它工作正常username: [{value: 'abc, disabled: true}]

如果我对此进行硬编码，它会显示 abc 但当我传递值时它不起作用

Answer 1

您需要使用 ngModel 在 HTML 中绑定数据

在 .html 文件中

<form [formGroup]="ionicForm" (ngSubmit)="submitForm()" novalidate>

    <ion-item>
      <ion-input  type="text" name="username" [(ngModel)]="data.username" formControlName="username" disabled></ion-input>
    </ion-item>

    <ion-item>
      <ion-input  type="text"  name="email" [(ngModel)]="data.email" formControlName="email" disabled></ion-input>

    </ion-item>
  </form>

在 .ts 文件中

 data:any={
    username:'username',
    email:"email"
  }