angular/angular

Discussion for angular (2+) - need help? create a stackblitz with your issue to get help faster using this template: https://stackblitz.com/fork/angular-issue-repro2

cuznerdexter

@cuznerdexter

So, I am not sure if this the best approach to this issue but looks like it is working for me. I added a changeDetectorRef.detectChanges() after creating the template in the view container and the UI now updates as I expect. Not seen any issues so far.

 /**
  * Creates the template content
  */
  showContent(): void {
    this.viewContainer.remove();
    this.viewContainer.createEmbeddedView(this.templateRef, this.context, 0);
    this.cdref.detectChanges();
  }

itsmenabil

@itsmenabil

hey guys, im new to this, can anyone please help me solve this code so i can join codewars

function multiply(a , b){
a * b
}

mogo-edenpark

@mogo-edenpark

function multiply(a , b){
   return a * b;


}

@itsmenabil

nunobotelhokk

@nunobotelhokk

I'm having some issues validating a form control. I'm setting this as a validator:

[
                Validators.required,
                Validators.minLength(9),
                Validators.maxLength(32)
        ]

But it only gives me the required error

If i remove the required, the control is always valid...

any idea on what i'm missing?

I have exactly the same validation on another place and it works fine.

mogo-edenpark

@mogo-edenpark

this.userForm = this.userFB.group({
            username: [
                "",
                Validators.compose([
                    Validators.required,
                    Validators.minLength(3),
                    Validators.maxLength(200),
                ]),
            ],

nunobotelhokk

@nunobotelhokk

I tried that, no luck.

mogo-edenpark

@mogo-edenpark

<mat-error
                                                    *ngIf="
                                                        isControlHasError(
                                                            'roles',
                                                            'required'
                                                        )
                                                    "
                                                >
                                                    <strong>{{

                                                        "AUTH.VALIDATION.REQUIRED_FIELD"
                                                            | translate
                                                    }}</strong>
                                                </mat-error>

    isControlHasError(controlName: string, validationType: string): boolean {
        const control = this.userForm.controls[controlName];

        if (!control) {
            return false;
        }
        const result =
            control.hasError(validationType) &&
            (control.dirty || control.touched);
        return result;
    }

This will solve

nunobotelhokk

@nunobotelhokk

But why do i need to do that? This isnt even a tricky validation to be done

mogo-edenpark

@mogo-edenpark

I think you need a setting or something to my knowledge

https://angular.io/guide/form-validation

in the doc they are still doing manually like this

<div *ngIf="heroForm.errors?.identityRevealed && (heroForm.touched || heroForm.dirty)" class="cross-validation-error-message alert alert-danger">
    Name cannot match alter ego.
</div>

like this.. That's all I know

Daniel Willis

@danww

@nunobotelhokk Can you reproduce in a Stackblitz instance?

mogo-edenpark

@mogo-edenpark

required is showing error because input has a property for required but not the length

nunobotelhokk

@nunobotelhokk

@danww its actually hard to reproduce, since i have this control on different forms. In one form he does validate correctly, in the other he doesnt. I'm not sure if i need to provide anything on the related module

Actually, they belong to the same module..

Daniel Willis

@danww

@nunobotelhokk K. It's just difficult to see the context without a working code example.

@nunobotelhokk And sometimes just the process of reproducing an issue in a Stackblitz means the solution becomes clear.

nunobotelhokk

@nunobotelhokk

Yup, ill try there.

nunobotelhokk

@nunobotelhokk

@danww https://stackblitz.com/edit/angular-ivy-scb3sp?

Thats it

But i dont think i'm doing anything different :joy:

Yup, found it

it seems that i cannot give it the input type of number...

Fkin hell...

Daniel Willis

@danww

So you can't validate minLength and maxLength on input with type="number"?

nunobotelhokk

@nunobotelhokk

It's the only thing i've changed, so i assume thats the issue with it

For number types, we should use min and max, and never minLength or maxLength

Validators.min(10000000000), Validators.max(999999999999)]

Should do something like that instead

Daniel Willis

@danww

:thumbsup:

That's good to know

I'm pleased you figured it out! :)

nunobotelhokk

@nunobotelhokk

Ye, it was messing with my head

Thanks for the help

Daniel Willis

@danww

No problem. I know it often seems like a lot of work and a real pain in the a**, but making a Stackblitz of the problem is such a helpful thing to do.

It's essentially the same as https://en.wikipedia.org/wiki/Rubber_duck_debugging

nunobotelhokk

@nunobotelhokk

Indeed.

FazilSog

@FazilSog

hello everybody
I m beginer on Angular generally & 8 specifically

So I cloned a git project et than I launched an npm install tu get back all projet dependencies

and after that I installedangular with npm install -g @angular/cli@8.1.3

Finally I lauched the server with ng serve -o

var code = "formatted";

this is the compilation erros that I'v got

(shift+enter for line break)
var code = "formatted";

FazilSog

@FazilSog

Browserslist: caniuse-lite is outdated. Please run next command `npm update`
 10% building 3/3 modules 0 activei ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
i ｢wds｣: webpack output is served from /   
i ｢wds｣: 404s will fallback to //index.html

chunk {main} main.js, main.js.map (main) 1.99 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 122 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 3.47 MB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 339 kB [initial] [rendered]
Date: 2021-01-20T21:46:10.345Z - Hash: d7587d01caf91f2a36ea - Time: 20540ms

ERROR in src/app/accueil/components/connection/connection.component.ts:9:36 - error TS2307: Cannot find module 'src/ws-contrat/target/generated-sources/annabel-be/strict-http-response'.

9 import { StrictHttpResponse } from 'src/ws-contrat/target/generated-sources/annabel-be/strict-http-response';
                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/activation-mdp/components/donneespersonnelles/donneespersonnelles.component.ts:10:28 - error TS2307: Cannot find module 'src/ws-contrat/target/generated-sources/annabel-be/services/ods.service'.

10 import { OdsService } from 'src/ws-contrat/target/generated-sources/annabel-be/services/ods.service';
                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Where communities thrive

People

Repo info

Activity