I am working on a multi-components form on ionic, but I am having problems with ion-inputs. Indeed, I have a formGroup composed of one formControl and one formArray. The application dynamically add formGroups to the formArray.
My problem here is the first input of the dynamically generated formGroups is keeping the focus on him and I cannot edit others.
Here the parent component :
export class ClusterFormComponent implements OnInit {
@Input() poi: Poi;
expandedRow = new BehaviorSubject(-1);
clusterData: ClusterData;
form: FormGroup;
clusterName: FormControl;
productsFormArray: FormArray;
constructor(private formBuilder: FormBuilder) {
}
ngOnInit() {
this.clusterData = new ClusterData(this.poi);
this.clusterName = new FormControl(this.clusterData.name, [
Validators.minLength(5),
Validators.required
]);
this.productsFormArray = new FormArray([]);
this.form = this.formBuilder.group({
"name": this.clusterName,
"products": this.productsFormArray
});
}
addProduct() {
const product = this.clusterData.pushProduct( 'sdsdd', 'sdsds', 'sdsdsd', 'productName' );
this.productsFormArray.push(new FormGroup({
name: new FormControl(product.name),
imgUrl1: new FormControl(product.imgUrl1, Validators.required),
imgUrl2: new FormControl(product.imgUrl2, Validators.required),
productUrl: new FormControl(product.productUrl, Validators.required),
}));
}
reorderItems(ev) {
const itemMove = this.clusterData.products.splice(ev.detail.from, 1)[0];
this.clusterData.products.splice(ev.detail.to, 0, itemMove);
ev.detail.complete();
}
onSubmit() {
}
}
with his template :
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<ion-item>
<ion-label position="floating">Cluster name</ion-label>
<ion-input formControlName="name"></ion-input>
</ion-item>
<ion-item>
<ion-list>
<ion-list-header>Products list</ion-list-header>
<ion-reorder-group (ionItemReorder)="reorderItems($event)" disabled="false">
<ion-item *ngFor="let formGroup of productsFormArray.controls; let i = index;">
<app-product-row
[product]="clusterData.products[i]"
[index]="i"
[expandedRow]="expandedRow"
[formGroup]="formGroup"
></app-product-row>
</ion-item>
</ion-reorder-group>
</ion-list>
</ion-item>
<ion-item class="add-container" [lines]="'none'">
<ion-button class="add-product-button" (click)="addProduct()">
<ion-icon name="add-outline"></ion-icon>
</ion-button>
</ion-item>
</form>
And here the product-row
export class ProductRowComponent implements OnInit {
@Input() product: IProduct;
@Input() index: number;
@Input() expandedRow: BehaviorSubject<number>;
@Input() formGroup: any;
@ViewChild('sliding') sliding: IonItemSliding;
constructor() {
}
ngOnInit() {}
toggle() {
if (this.expandedRow.value === this.index) {
this.expandedRow.next(-1);
} else {
this.expandedRow.next(this.index);
}
}
}
with his template :
<ion-item-sliding #sliding>
<ion-item [lines]="'none'">
<ion-label></ion-label>
<ion-buttons>
<ion-button slot="end" (click)="toggle()">
<ion-icon name="chevron-down-outline" [name]="(expandedRow | async) === index ? 'chevron-up-outline' : 'chevron-down-outline'"></ion-icon>
</ion-button>
</ion-buttons>
<ion-reorder slot="end"></ion-reorder>
</ion-item>
<ion-item-options>
<ion-item-option color="danger" class="delete">
<ion-icon name="trash-sharp"></ion-icon>
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
<ion-item class="expandable" [ngClass]="(expandedRow | async) === index ? 'expanded' : 'not-expanded'" [formGroup]="formGroup">
<ion-list>
<ion-item>
<ion-label position="floating">Image 1</ion-label>
<ion-input formControlName="imgUrl1" [readonly]="true"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Image 2</ion-label>
<ion-input formControlName="imgUrl2"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Product</ion-label>
<ion-input formControlName="productUrl"></ion-input>
</ion-item>
</ion-list>
</ion-item>
Here is the input I am talking about : app screenshot
When I click on the second input, the focus switch when the mouse in down, and go back to the first one when mouse is up..
I have been trying for 4 hours..
Thanks in advance
Aucun commentaire:
Enregistrer un commentaire