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"
}