Иони c:
- Иони c CLI: 6.0.0
- Иони c Каркас: @ ionic / angular 5.0.0
- @ angular -devkit / build- angular: 0.801.3
- @ angular -devkit / schematics: 8.1.3
- @ angular / cli: 8.1. 3
- @ ionic / angular -toolkit: 2.1.2
На рисунке ниже видно, что после нажатия на «Coletor» «Linha 02» уже выбрана хотя он не показывался как выбранный до щелчка. Он корректно работает с полем «Permissão», хотя:
https://i.stack.imgur.com/tjRjy.gif
config-add-user.page. html
<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-button (click)="closeModal()">
<ion-icon name="arrow-back-outline"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title><b>Usuário</b></ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<form [formGroup]="addUserGroup">
<ion-list inset ion-no-border>
<ion-item>
<ion-label color="medium">Usuário:</ion-label>
<ion-input class="ion-text-end" type="text" name="username" formControlName="username" value="{{ username }}"></ion-input>
</ion-item>
<br>
<ion-item>
<ion-label color="medium">Password:</ion-label>
<ion-input class="ion-text-end" type="password" name="password" formControlName="password" value="{{ password }}"></ion-input>
</ion-item>
<br>
<ion-item>
<ion-label color="medium">Name:</ion-label>
<ion-input class="ion-text-end" type="text" name="name" formControlName="name" value="{{ name }}"></ion-input>
</ion-item>
<br>
<ion-item>
<ion-label color="medium">Permissão:</ion-label>
<ion-select class="ion-text-end" name="permission" formControlName="permission" value="{{ selectPermission }}">
<ion-select-option value="1">Usuário</ion-select-option>
<ion-select-option value="2">Administrador</ion-select-option>
</ion-select>
<ion-icon name="chevron-forward-outline" color="primary" item-end></ion-icon>
</ion-item>
<br>
<ion-item>
<ion-label color="medium">Coletor:</ion-label>
<ion-select class="ion-text-end" multiple="true" name="idLine" formControlName="idLine" [(value)]="selectLine">
<ion-select-option *ngFor="let item of linesList" value="{{item.id}}">
{{ item.name }}
</ion-select-option>
</ion-select>
<ion-icon name="chevron-forward-outline" color="primary" item-end></ion-icon>
</ion-item>
<br>
</ion-list>
<ion-row>
<ion-col>
<ion-button [disabled]="addUserGroup.invalid" (click)="postUser()" type="submit" expand="block" size="large">SALVAR</ion-button>
</ion-col>
</ion-row>
</form>
</ion-content>
config-add-user.page.ts
import { UserService } from '../api/user.service';
import { Component, Input } from '@angular/core';
import { Validators, FormBuilder, FormControl } from '@angular/forms';
import { AlertController, ModalController } from '@ionic/angular';
@Component({
selector: 'app-config-add-user',
templateUrl: './config-add-user.page.html',
styleUrls: ['./config-add-user.page.scss'],
})
export class ConfigAddUserPage {
/* DATA VARIABLES */
addUserGroup: any = {};
linesList: Array<any>;
/* EDIT VARIABLES */
selectLine: Array<any>;
selectPermission: string;
// Data passed in by componentProps
@Input() modal: any;
@Input() edit: string;
@Input() token: string;
@Input() id: string;
@Input() idLine: Array<any>;
@Input() clientId: string;
@Input() username: string;
@Input() password: string;
@Input() name: string;
@Input() permission: string;
constructor(
public service : UserService,
public alertCtrl: AlertController,
public formBuilder : FormBuilder,
public modalController: ModalController,
) {
this.addUserGroup = this.formBuilder.group({
token: new FormControl('xxxx', Validators.required),
dns: new FormControl(this.service.getDns(), Validators.required),
user: new FormControl(this.service.getUser(), Validators.required),
pass: new FormControl(this.service.getPass(), Validators.required),
clientId: new FormControl(this.service.getClientId(), Validators.required),
id: new FormControl(this.id),
username: new FormControl('', Validators.required),
password: new FormControl('', Validators.required),
name: new FormControl('', Validators.required),
permission: new FormControl('', Validators.required),
idLine: new FormControl('', Validators.required)
});
}
ionViewDidEnter() {
this.getProductionLines();
this.selectPermission = this.permission;
this.selectLine = this.idLine;
// Removing Ion Select Icons
const ionChange = document.querySelectorAll('ion-select');
ionChange.forEach((sel) => {
sel.shadowRoot.querySelectorAll('.select-icon-inner')
.forEach((elem) => {
elem.setAttribute('style', 'display: none;');
});
});
}
postUser() {
if (this.edit == "true") {
this.service.updateDataUser(this.addUserGroup.value)
.subscribe(
data=>{
console.log(data.message);
},
err=>console.log(err)
);
this.modal.dismiss();
}
if (this.edit == "false") {
this.service.postDataUser(this.addUserGroup.value)
.subscribe(
data=>{
if (data.search === false) {
console.log(data.message);
this.modal.dismiss();
} else {
console.log(data.message);
this.postAlert();
}
},
err=>console.log(err)
);
this.modal.dismiss();
}
}
async postAlert() {
const alert = await this.alertCtrl.create({
header: 'Usuário Repetido',
message: 'Tente outro username...',
buttons: ['OK']
});
await alert.present();
}
getProductionLines() {
this.service.getDataProductionLines().subscribe(
data => this.linesList = data,
err => console.log(err)
);
}
closeModal() {
this.modal.dismiss({
'edit' : "",
'token' : "",
'id' : "",
'idLine' : "",
'clientId' : "",
'username' : "",
'password' : "",
'name' : "" ,
'permission' : "",
});
}
}