@wiloooo wrote:

Hi, sorry for my english i’m french =)
I’ve a question, how change in capacitor toast background color ? in Toast.show() ?

Thank you

Posts: 1

Participants: 1

Read full topic

@pdj wrote:

as you can do in normal web browser,
I wonder If it’s possible to zoom in and out freely

I thought basically ionic provide this functionality but it’s not.
how can I zoom in and out freely on app?

Posts: 1

Participants: 1

Read full topic

@bringthefood wrote:

Hi

I have a project with OneSignal installed. It was working fine, until new iOS was release which meant that iOS users were not being subscribed to onesignal.

So as per the onesignal instructions, i removed the one signal plugin and added again, thus updating to latest version. iOS is now working fine.

However, since updating one-signal plugin, i am now unable to build android release versions. If i do not use the release flag, i manage to build a debug version successfully.

But when using the release flag, I keep getting the following error:

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:lintVitalRelease'.
> Could not resolve all artifacts for configuration ':app:debugUnitTestRuntimeClasspath'.
   > Could not find com.google.android.gms:play-services-ads-identifier:11.8.0.
     Required by:
         project :app > com.onesignal:OneSignal:3.13.1
   > Could not find com.google.android.gms:play-services-stats:11.8.0.
     Required by:
         project :app > com.onesignal:OneSignal:3.13.1 > com.google.firebase:firebase-messaging:17.3.4 > com.google.firebase:firebase-iid:17.0.4

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

* Get more help at https://help.gradle.org

BUILD FAILED in 18s
28 actionable tasks: 1 executed, 27 up-to-date
(node:15032) UnhandledPromiseRejectionWarning: Error: /Volumes/Data HD/zedmiah/desktop/submited/lowestofttandoori/platforms/android/gradlew: Command failed with exit code 1 Error output:
FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:lintVitalRelease'.
> Could not resolve all artifacts for configuration ':app:debugUnitTestRuntimeClasspath'.
   > Could not find com.google.android.gms:play-services-ads-identifier:11.8.0.
     Required by:
         project :app > com.onesignal:OneSignal:3.13.1
   > Could not find com.google.android.gms:play-services-stats:11.8.0.
     Required by:
         project :app > com.onesignal:OneSignal:3.13.1 > com.google.firebase:firebase-messaging:17.3.4 > com.google.firebase:firebase-iid:17.0.4

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

* Get more help at https://help.gradle.org

BUILD FAILED in 18s
    at ChildProcess.whenDone (/Volumes/Data HD/zedmiah/desktop/submited/lowestofttandoori/platforms/android/cordova/node_modules/cordova-common/src/superspawn.js:169:23)
    at emitTwo (events.js:126:13)
    at ChildProcess.emit (events.js:214:7)
    at maybeClose (internal/child_process.js:915:16)
    at Socket.stream.socket.on (internal/child_process.js:336:11)
    at emitOne (events.js:116:13)
    at Socket.emit (events.js:211:7)
    at Pipe._handle.close [as _onclose] (net.js:561:12)
(node:15032) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:15032) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
MacBook-Pro:lowestofttandoori zedmiah$ 

Any help will be appreciated!

Thanks
Z

Posts: 1

Participants: 1

Read full topic

@neverlose wrote:

I am having problems with Ionic Native plugins.

Check out this post: https://stackoverflow.com/questions/61206116/problems-with-import-in-ionic-native-plugins-in-angular

Feel free to leave comments here. I will read both sources.

Posts: 1

Participants: 1

Read full topic

@Sweg wrote:

The below code is used in an Ionic 5 / Angular tutorial to update a Place object. I am trying to apply this same code to my project where I update a Conversation object:

Place Service:

private _places = new BehaviorSubject<Place[]>([
    new Place(
      'p1',
      'Manhattan Mansion',
      'In the heart of New York City.',
      'https://lonelyplanetimages.imgix.net/mastheads/GettyImages-538096543_medium.jpg?sharp=10&vib=20&w=1200',
      149.99,
      new Date('2019-01-01'),
      new Date('2019-12-31'),
      'abc'
    )
  ]);

  get places() {
    return this._places.asObservable();
  }

updatePlace(placeId: string, title: string, description: string) {
    return this.places.pipe(
      take(1),
      delay(1000),
      tap(places => {
        const updatedPlaceIndex = places.findIndex(pl => pl.id === placeId);
        const updatedPlaces = [...places];
        const oldPlace = updatedPlaces[updatedPlaceIndex];
        updatedPlaces[updatedPlaceIndex] = new Place(
          oldPlace.id,
          title,
          description,
          oldPlace.imageUrl,
          oldPlace.price,
          oldPlace.availableFrom,
          oldPlace.availableTo,
          oldPlace.userId
        );
        this._places.next(updatedPlaces);
      })
    );
  }

And here is the Place model:

export class Place {
  constructor(
    public id: string,
    public title: string,
    public description: string,
    public imageUrl: string,
    public price: number,
    public availableFrom: Date,
    public availableTo: Date,
    public userId: string
  ) {}
}

As you can see, the above updatePlace() method can be subscribed to when called.

I am trying to create an addMessageToConversation() method that can also be subscribed to, exactly like above.

Here is my code so far:

Conversation Service:

private _conversations = new BehaviorSubject<Conversation[]>([
    new Conversation(
      'conversation1',
      'user3',
      'user1',
      [
        new Message('message1', 'Test message', 'user3', new Date(2018, 0O5, 0O5, 17, 23, 42, 11)),
        new Message('message2', 'Another message', 'user1', new Date(2018, 0O6, 0O5, 17, 23, 42, 11))
      ])
  ]);

  get conversations() {
    return this._conversations.asObservable();
  }

addMessageToConversation(conversationId: string, message: string) {
    this._conversations.getValue().find(conversation => conversation.id === conversationId)
      .messages.push(
        new Message(
          Math.random().toString(),
          message,
          this.authService.userId,
          new Date(Date.now())
        ));
  }

And here are the Conversation & Message models:

export class Conversation {
    constructor(
        public id: string,
        public userId: string,
        public mechanicId: string,
        public messages: Message[]
    ) { }
}

export class Message {
    constructor(
        public id: string,
        public text: string,
        public userId: string,
        public timestamp: Date
    ) { }
}

The above code does update conversations , but I can’t subscribe to the method. Can someone please tell me what changes I need to make so that this is possible?

If I return what is in addMessageToConversation() & try to subscribe to it, I get this error message:

Property subscribe does not exist on type ‘number’

Posts: 1

Participants: 1

Read full topic

@lhk wrote:

My app consists of a page with a very long ion-content that users are supposed to read.
There are some other pages (config etc) that users might occasionally interact with.

After each page-switch, the ion-content would be reset to it’s starting position.
So I stored the current scroll position in a variable and added a useEffect (it’s a react app) that scrolls to this position.

So far this worked nicely, but now I added the config option of changing fontsize. Which will change the size of all elements in that ion-content and invalidate the scroll position.
As a workaround I tried scrolling to a percentage:

useEffect(() => {
    const elem: any = document.getElementById("reader-content");
    if (!elem)  return;

    elem.scrollToPoint(0, scrollPercentage * elem.offsetHeight);
});

//...


onIonScroll={(ev) => {
    const elem = document.getElementById("reader-content");
    if (!elem) return;

    scrollPercentage = ev.detail.currentY / elem.offsetHeight;
}}

But this will not return to the same position. Apparently offsetHeight includes borders and other padding around the element. So I tried clientHeight, but that also doesn’t work.

Can you help me with what’s going wrong here?

Eventually, I would like to keep track of items that have been read. Maybe this is the right time to add that functionality. Is it possible to use scrollTo(element) with ionContent? Can I specify an HTML element to scroll to, instead of a coordinate?

Posts: 1

Participants: 1

Read full topic

@roy800227 wrote:

Hi everyone.
I use the plugin Location Accuracy to get the location service of the enabled device.
But someone’s device without Google Play Service, so the plugin cannot be used.
Please tell me how to solve this problem

Posts: 1

Participants: 1

Read full topic

@Bastok wrote:

I tried the new “awesome ionic 5 capacitor”, followed the doc
https://capacitor.ionicframework.com/docs/getting-started/with-ionic/?utm_source=cli&utm_medium=referral&utm_campaign=CLI

i tried to copy the www folder content in my server, and i have to say, it doesn’t work at all
Failed to load resource: the server responded with a status of 404 (Not Found)
polyfills-es2015.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
styles-es2015.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
vendor-es2015.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
main-es2015.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
/assets/icon/favicon.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)

I’m really REALLY fed up with all those brand new exciting awesome features that make me waste my time.

Posts: 1

Participants: 1

Read full topic

@gdeepithi wrote:

IETM stands for Interactive Electronic Technical Manual Services which are classified as Level 1, Level 2, Level 3, Level 4 and Level 5. IETM is the replacement of paper work which is equivalent for a paper based presentation. Technical documentation software development company in Hyderabad? Learn the effective technical documentation with Code and Pixels. We deliver the excellency in providing training for user hand book, operation manual, manufactured and illustrated spare-part list, blowup charts, IETM and user guide.

Posts: 1

Participants: 1

Read full topic

@jerdeaf1 wrote:

Hello guys,
Steps:

1. new stencil project, build it, the dist/ and loader/ folders generated
2. new create-react-app where the project created at 1) is used like stencil suggest:

import { applyPolyfills, defineCustomElements } from 'test-components/loader';
		applyPolyfills().then(() => {
			defineCustomElements();
		});

3. looks good in all browsers except IE. The polyfill is not applied in IE11 (Error: ‘Promise’ is undefined).
4. if I use the scripts in index.html it works good

Is that a known issue in Stencil or am I doing something wrong (what?)?

Posts: 1

Participants: 1

Read full topic

@tripurarisingh wrote:

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class AuthinterceptorService implements HttpInterceptor {

  constructor() { }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
   
    const token = localStorage.getItem('token')
    request = this.addToken(request,token)
    return next.handle(request)
  }

  private addToken(request: HttpRequest<any>, token: string) {

    return request.clone({
      setHeaders: {
        Authorization: `Bearer ${token}`,
      },
      withCredentials: true,
    })
  } 


}

Above my code

Posts: 1

Participants: 1

Read full topic

@Amin0096 wrote:

Hi Team,

I have tried to open pdf file in HTML page using Iframe but I am facing issue. Some time it opens and some time not.

Any help would be much appreciated
Thanks

Posts: 1

Participants: 1

Read full topic

@VictorNorman wrote:

I am trying to implement some simple e2e tests for my simple little “Monty Python Quiz” app (https://github.com/VictorNorman/ionic-quiz-demo) and keep running into problems.

My test starts up Chrome and I see the data, which has been pulled down from firestore, but then the test dies, not giving me enough information to figure out what is wrong. I think it is only a problem when I use firestore as my data source – instead of using hard-coded and a non-asynchronous data source.

Here is the output from my run:

12:44:31] I/launcher - Running 1 instances of WebDriver
[12:44:31] I/direct - Using ChromeDriver directly...
Jasmine started

  new App
    ✗ should have first page with correct question and answers
      - Failed: script timeout
        (Session info: chrome=81.0.4044.92)
        (Driver info: chromedriver=81.0.4044.69 (6813546031a4bc83f717a2ef7cd4ac6ec1199132-refs/branch-heads/4044@{#776}),platform=Mac OS X 10.15.4 x86_64)
        (Session info: chrome=81.0.4044.92)
        (Driver info: chromedriver=81.0.4044.69 (6813546031a4bc83f717a2ef7cd4ac6ec1199132-refs/branch-heads/4044@{#776}),platform=Mac OS X 10.15.4 x86_64)
          at Object.checkLegacyResponse (/Users/vtn2/ionic/quiz-orig/node_modules/selenium-webdriver/lib/error.js:546:15)
          at parseHttpResponse (/Users/vtn2/ionic/quiz-orig/node_modules/selenium-webdriver/lib/http.js:509:13)
          at doSend.then.response (/Users/vtn2/ionic/quiz-orig/node_modules/selenium-webdriver/lib/http.js:441:30)
          at process._tickCallback (internal/process/next_tick.js:68:7)
      From: Task: Protractor.waitForAngular() - Locator: By(css selector, app-root ion-content)
          at Driver.schedule (/Users/vtn2/ionic/quiz-orig/node_modules/selenium-webdriver/lib/webdriver.js:807:17)
          at ProtractorBrowser.executeAsyncScript_ (/Users/vtn2/ionic/quiz-orig/node_modules/protractor/built/browser.js:425:28)
          at angularAppRoot.then (/Users/vtn2/ionic/quiz-orig/node_modules/protractor/built/browser.js:456:33)
          at ManagedPromise.invokeCallback_ (/Users/vtn2/ionic/quiz-orig/node_modules/selenium-webdriver/lib/promise.js:1376:14)
          at TaskQueue.execute_ (/Users/vtn2/ionic/quiz-orig/node_modules/selenium-webdriver/lib/promise.js:3084:14)
          at TaskQueue.executeNext_ (/Users/vtn2/ionic/quiz-orig/node_modules/selenium-webdriver/lib/promise.js:3067:27)
          at asyncRun (/Users/vtn2/ionic/quiz-orig/node_modules/selenium-webdriver/lib/promise.js:2927:27)
          at /Users/vtn2/ionic/quiz-orig/node_modules/selenium-webdriver/lib/promise.js:668:7
          at process._tickCallback (internal/process/next_tick.js:68:7)Error:
          at ElementArrayFinder.applyAction_ (/Users/vtn2/ionic/quiz-orig/node_modules/protractor/built/element.js:459:27)
          at ElementArrayFinder.(anonymous function).args [as getText] (/Users/vtn2/ionic/quiz-orig/node_modules/protractor/built/element.js:91:29)
          at ElementFinder.(anonymous function).args [as getText] (/Users/vtn2/ionic/quiz-orig/node_modules/protractor/built/element.js:831:22)
          at AppPage.getParagraphText (/Users/vtn2/ionic/quiz-orig/e2e/src/app.po.ts:8:52)
          at UserContext.<anonymous> (/Users/vtn2/ionic/quiz-orig/e2e/src/app.e2e-spec.ts:14:17)
          at /Users/vtn2/ionic/quiz-orig/node_modules/jasminewd2/index.js:112:25
          at new ManagedPromise (/Users/vtn2/ionic/quiz-orig/node_modules/selenium-webdriver/lib/promise.js:1077:7)
          at ControlFlow.promise (/Users/vtn2/ionic/quiz-orig/node_modules/selenium-webdriver/lib/promise.js:2505:12)
          at schedulerExecute (/Users/vtn2/ionic/quiz-orig/node_modules/jasminewd2/index.js:95:18)
          at TaskQueue.execute_ (/Users/vtn2/ionic/quiz-orig/node_modules/selenium-webdriver/lib/promise.js:3084:14)
      From: Task: Run it("should have first page with correct question and answers") in control flow
          at UserContext.<anonymous> (/Users/vtn2/ionic/quiz-orig/node_modules/jasminewd2/index.js:94:19)
          at /Users/vtn2/ionic/quiz-orig/node_modules/jasminewd2/index.js:64:48
          at ControlFlow.emit (/Users/vtn2/ionic/quiz-orig/node_modules/selenium-webdriver/lib/events.js:62:21)
          at ControlFlow.shutdown_ (/Users/vtn2/ionic/quiz-orig/node_modules/selenium-webdriver/lib/promise.js:2674:10)
          at shutdownTask_.MicroTask (/Users/vtn2/ionic/quiz-orig/node_modules/selenium-webdriver/lib/promise.js:2599:53)
      From asynchronous test:
      Error:
          at Suite.<anonymous> (/Users/vtn2/ionic/quiz-orig/e2e/src/app.e2e-spec.ts:11:3)
          at Object.<anonymous> (/Users/vtn2/ionic/quiz-orig/e2e/src/app.e2e-spec.ts:4:1)
          at Module._compile (internal/modules/cjs/loader.js:776:30)
          at Module.m._compile (/Users/vtn2/ionic/quiz-orig/node_modules/ts-node/src/index.ts:439:23)
          at Module._extensions..js (internal/modules/cjs/loader.js:787:10)
          at Object.require.extensions.(anonymous function) [as .ts] (/Users/vtn2/ionic/quiz-orig/node_modules/ts-node/src/index.ts:442:12)

**************************************************
*                    Failures                    *
**************************************************

1) new App should have first page with correct question and answers
  - Failed: script timeout
    (Session info: chrome=81.0.4044.92)
    (Driver info: chromedriver=81.0.4044.69 (6813546031a4bc83f717a2ef7cd4ac6ec1199132-refs/branch-heads/4044@{#776}),platform=Mac OS X 10.15.4 x86_64)

Executed 1 of 1 spec (1 FAILED) in 12 secs.
[12:44:45] I/launcher - 0 instance(s) of WebDriver still running
[12:44:45] I/launcher - chrome #01 failed 1 test(s)
[12:44:45] I/launcher - overall: 1 failed spec(s)
[12:44:45] E/launcher - Process exited with error code 1

It always gives me this error. I see the web page rendered correctly.

here is the whole test:

describe('new App', () => {
  let page: AppPage;

  beforeEach(() => {
    page = new AppPage();
  });

  it('should have first page with correct question and answers', () => {
    page.navigateTo();
    expect(page.getParagraphText()).toContain('What is your name?');
  }

getParagraphText() is:

getParagraphText() {
    return element(by.css('app-root ion-content')).getText();
  }

Has anyone successfully implemented e2e testing against Firestore data?

Thanks.

Vic

Here is my config info:

$ ionic info

Ionic:

   Ionic CLI                     : 5.4.16 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.11.10
   @angular-devkit/build-angular : 0.803.26
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : not available
   Cordova Plugins   : not available

Utility:

   cordova-res (update available: 0.11.0) : 0.6.0
   native-run (update available: 1.0.0)   : 0.3.0

System:

   Android SDK Tools : 26.1.1 (/Users/vtn2/Library/Android/sdk)
   NodeJS            : v10.16.0 (/usr/local/bin/node)
   npm               : 6.13.7
   OS                : macOS Catalina

Posts: 1

Participants: 1

Read full topic

@fc299684 wrote:

Hello, I wanted to ask about what is happening to me.

I have an ION-BADGE where it notifies me when I have an unread message.

As I do when the number is not displayed at 0.

My code:

Screenshoot

Look for something related in the forum, but did not find the answer.
Thanks!!

Posts: 1

Participants: 1

Read full topic

@shepard wrote:

Has anyone been able to successfully build an app in Production mode with FontAwesome?
I have tried a variety of examples ans they all lead to error:
uncaught NullInjectorError: StaticInjectorError(a)[a -> e]:

Ionic ionfo:

 Ionic CLI                     : 6.5.0
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.803.26
   @angular-devkit/schematics    : 8.3.26
   @angular/cli                  : 8.3.26
   @ionic/angular-toolkit        : 2.2.0

I have tried:
(app.module.ts)
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';

and using:

import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons'

and various other ways in fresh new apps.

I have tried:

as well as instructions from:

Posts: 1

Participants: 1

Read full topic

@em-app-dev wrote:

Hi, I am using capacitor push notifications plugin and I can’t see notification badge counter on the app icon. In other apps it shows normally but in my case it doesn’t. Has anyone faced this? Thanks in advance

Posts: 1

Participants: 1

Read full topic

@seantomas wrote:

I’m having trouble getting an ion-alert to display for a plain javascript (ionic via CDN) site. The ionic documentation for ion-alert and Javascript shows the following:

function presentAlert() {
  const alert = document.createElement('ion-alert');
  alert.header = 'Alert';
  alert.subHeader = 'Subtitle';
  alert.message = 'This is an alert message.';
  alert.buttons = ['OK'];

  document.body.appendChild(alert);
  return alert.present();
}

However, this only ever results in: “TypeError: alert.present is not a function”

What am I missing?

Posts: 1

Participants: 1

Read full topic

@RobeNogueira145 wrote:

I have a input inside an alert, how I can to put autocomplete off?

async promptSave() {
    let igual = 0;
    let alert = await this.alertController.create({
      header: 'Nome da obra',
      inputs: [
        {
          name: 'nome',
          placeholder: 'Introduzir nome',
          //HERE
        }
      ],
      buttons: [
        {
          text: 'Cancelar',
          role: 'cancel'
        },
        {
          text: 'Confirmar',
          handler: data => {
            if(data.nome == ""){
              this.duplicado('O nome da obra deve ser preenchido.');
            }
            else{
              for (let i = 0; i <= this.vet.length - 1; i++) {
                if(data.nome == this.vet[i].nome){
                  igual = 1;
                }
              }
              if(igual == 0){
                this.date = new Date();
                this.formatedDate = this.date.toISOString().substring(0, 10);
                this.a = this.formatedDate.split('-');
                this.b = this.a[2] + "-" + this.a[1] + "-" + this.a[0];

                this.vet.push({
                  'nome': data.nome,
                  'data': this.b
                })

                localStorage.setItem('vetor', JSON.stringify(this.vet));
                localStorage.setItem(data.nome, JSON.stringify(this.juntar));
                this.nome = data.nome;
                this.toastPrompt2();
              }
              else{
                this.duplicado("Nome da obra já existe.");
              }
            }
          }
        }
      ]
    });
    alert.present();
  }
`

Posts: 1

Participants: 1

Read full topic

@Slavrixx wrote:

Is there a way to use Platform from @ionic/angular inside the @NgModule

@NgModule({
  declarations: [
    AppComponent
  ],
  entryComponents: [
    TermsComponent,
    ....
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    ServiceWorkerModule.register('OneSignalSDKWorker.js', { enabled: platform.is('pwa') }),
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireStorageModule,
    ...
  ],
  providers: [
    {provide: ErrorHandler, useClass: environment.production ? SentryErrorHandler : ErrorHandler}
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(public platform: Platform) {
    console.log('plat: ', this.platform.is('android'));
  }
}

I only want the service worker module to be active on PWA, not on hybrid.
Currently an environment variable

Posts: 1

Participants: 1

Read full topic

@Geelario wrote:

Good day experts. I am new to ionic and angular. Please I will need your help to solve this problem. I want to populate a form with a registered user data that is retrieved using API so that the user can edit his/her details. I am having error with my code.
userPage.ts

customerData: any; 
 createform: any;
  constructor(public modalCtrl : ModalController, private WC: WoocommerceService, private fb : FormBuilder) {

       // this retrieve user data 
    let isUserLoggedIn = localStorage.getItem('currentUserId');

    this.WC.getUserInfo(isUserLoggedIn).subscribe((data)=>{

      this.customerData = data; 

    });

   }

  ngOnInit() {
    this.createform = this.fb.group({

      first_name: [''],

      last_name: [''],

      username: [''],

      email: [''],

    });

    

  }

  update(){   

     this.createform.patchValue({

    first_name: this.customerData.first_name,

    last_name: this.customerData.last_name,

    username: this.customerData.username,

    email: this.customerData.email,

  })

  }

userPage.html

<form #createform="ngForm">

            <ion-item color="transparent">
              <ion-label position="floating" ><ion-icon name="person" slot="start"></ion-icon> First name</ion-label>
              <ion-input
              name="first_name"
              ngModel
              [(ngModel)]="first_name"
              #fname="ngModel"
              required
              minlength="3"

              >
            </ion-input>
            </ion-item>
            <div *ngIf=" fname.touched && !fname.valid">
              <ion-text color="danger" >
                <p *ngIf='fname.errors.required'>First name is required</p>
                <p *ngIf='fname.errors.minlength'>First name should be minimum of 3 characters long</p>
              </ion-text>
            </div>

            <ion-item color="transparent" >
              <ion-label position="floating" ><ion-icon name="person" slot="start"></ion-icon> Last name</ion-label>
              <ion-input 
              name="last_name"
              ngModel
              [(ngModel)]="last_name"
              #lname="ngModel"
              required
              minlength="6"

              >
            </ion-input>
            </ion-item>
            <div *ngIf=" lname.touched && !lname.valid">
              <ion-text color="danger" >
                <p *ngIf='lname.errors.required'>Last name is required</p>
                <p *ngIf='lname.errors.minlength'>Last name should be minimum of 3 characters long</p>
              </ion-text>
            </div>
            <ion-item color="transparent">
              <ion-label position="floating" ><ion-icon name="mail" slot="start"></ion-icon> Email</ion-label>
              <ion-input 
              name="email"
              ngModel
              [(ngModel)]="email"
              #uemail="ngModel"
              required

              ></ion-input>
            </ion-item>
            <div *ngIf="uemail.touched && !uemail.valid">
              <ion-text color="danger" >
                <p *ngIf='uemail.errors.required'>Email is required</p>
                <p *ngIf='uemail.errors.pattern'>Please a provide valid email</p>
              </ion-text>
            </div>
            <ion-item color="transparent">
              <ion-label position="floating" ><ion-icon name="person" slot="start"></ion-icon> Username</ion-label>
              <ion-input 
              name="username"
              ngModel
              [(ngModel)]="username"
              #uname="ngModel"
              required
              minlength="6"

              >
            </ion-input>
            </ion-item>
            <div *ngIf=" uname.touched && !uname.valid">
              <ion-text color="danger" >
                <p *ngIf='uname.errors.required'>Username is required</p>
                <p *ngIf='uname.errors.minlength'>Username should be minimum of 6 characters long</p>
              </ion-text>
            </div>
            <ion-item  color="transparent">
              <ion-label position="floating" ><ion-icon name="call" slot="start"></ion-icon> Phone</ion-label>
              <ion-input 
              name="phone"
              ngModel
              [(ngModel)]="user.phone"
              #uphone="ngModel"
              type="number" 
              ></ion-input>
            </ion-item>
            <div *ngIf="uphone.touched && !uphone.valid">
              <ion-text color="danger" >
                <p *ngIf='uphone.errors.required'>Phone is required</p>
              </ion-text>
            </div>

            <ion-item  color="transparent">
              <ion-label position="floating" ><ion-icon name="newspaper" slot="start"></ion-icon> Address</ion-label>
              <ion-input 
              name="address"
              ngModel
              [(ngModel)]="user.billing.address_1"
              #uaddress="ngModel"    
              ></ion-input>
            </ion-item>
            <div *ngIf="uaddress.touched && !uaddress.valid">
              <ion-text color="danger" >
                <p *ngIf='uaddress.errors.required'>Address is required</p>
              </ion-text>
            </div>


              <div class="ion-padding-top">
                <ion-button expand="block"  class="ion-no-margin" color="success"   (click)="updateuser()" >
                  Update</ion-button>
              </div>
          </form> 

I am really having a sleepless night on this, please I need your help. Thank you.

Posts: 1

Participants: 1

Read full topic