Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 13:17
    pkozlowski-opensource labeled #44355
  • 13:17
    ngbot[bot] milestoned #44355
  • 13:17
    pkozlowski-opensource labeled #44355
  • 12:57
    alexkushnarov commented #44044
  • 12:55
    kwesidev starred angular/angular
  • 12:40
    dario-piotrowicz synchronize #44357
  • 12:39
    dario-piotrowicz edited #44357
  • 12:39
    dario-piotrowicz edited #44357
  • 12:29
    gkalpak unlabeled #44273
  • 12:29
    gkalpak labeled #44273
  • 12:27
    renovate[bot] edited #44273
  • 12:26
    pullapprove[bot] review_requested #44273
  • 12:26
    pullapprove[bot] review_requested #44273
  • 12:26
    pullapprove[bot] review_requested #44273
  • 12:26
    pullapprove[bot] review_requested #44273
  • 12:26
    pullapprove[bot] review_requested #44273
  • 12:26
    pullapprove[bot] review_requested #44273
  • 12:26
    pullapprove[bot] review_requested #44273
  • 12:26
    pullapprove[bot] review_requested #44273
  • 12:26
    gkalpak synchronize #44273
Oh - sorry, I misread - one sec...
freshdev1
@freshdev1
i want to get rid of the old ones.
Daniel Willis
@danww
Check it now.
I remember having this issue before - you need to iterate over the formArray and removeAt()
freshdev1
@freshdev1
Hmmm it works on this simplified example but it won't on my local project.
Daniel Willis
@danww
Hmmm - can you spot what is different?
freshdev1
@freshdev1
Works now. I was using formArray.clear() to clear out old objects. which was causing some issue, I don't know.
Was also using it with removeAt
Final working code:
onDocumentUpdate(documentsArray: DocumentModel[]): void{
    if(documentsArray == undefined)
    {
      return; 
    }

    var docsControls = this.contractForm.controls["TenantContractDocuments"] as FormArray;

    while(docsControls.length !== 0)
    {
      docsControls.removeAt(0);
    }

    documentsArray.forEach((element: DocumentModel) => {
      let docGroup = this.formBuilder.formGroup(DocumentSubmission);
      let document = element as DocumentSubmission;

      docGroup.patchValue(document);
      docsControls.push(docGroup);
    });
  }
Daniel Willis
@danww
I don't think formArray.clear() is a thing, unless it's in the RxWeb library?
freshdev1
@freshdev1
What was not working:
onDocumentUpdate(documentsArray: DocumentModel[]): void{
    if(documentsArray == undefined)
    {
      return; 
    }

    var docsControls = this.contractForm.controls["TenantContractDocuments"] as FormArray;

    docsControls.clear();
   docsControls = new FormArray([]);

    while(docsControls.length !== 0)
    {
      docsControls.removeAt(0);
    }

    documentsArray.forEach((element: DocumentModel) => {
      let docGroup = this.formBuilder.formGroup(DocumentSubmission);
      let document = element as DocumentSubmission;

      docGroup.patchValue(document);
      docsControls.push(docGroup);
    });
  }
I read it on some of the answers and tried.
Its from the angular itself
Daniel Willis
@danww
Yeah, docsControl needs to remain a reference to the existing formArray
hmmm makes sense, I was reassigning it to the parent form even after initializing a new one. But that too was not working.
thanks for the help! :smile:
Daniel Willis
@danww
No worries.
Weird, .clear() is in the docs: https://angular.io/api/forms/FormArray#clear
But doesn't seem to exist. IDE/Stackblitz throws error.
freshdev1
@freshdev1
yeah. there is definitely some issues with it. on my local it exists and works, but when I use it it won't update the actual main FORMGROUP.
that was where I was having hard time
freshdev1
@freshdev1
this was how I was doing at another place:
    var contractedBeds = this.contractedBedsFormGroup.controls['AddContractedBeds'] as FormArray;
    contractedBeds.clear();

    //remove all the objects from form array:
    while (contractedBeds.length !== 0) {
      contractedBeds.removeAt(0)
    }

    $event.forEach(element => {
      contractedBeds = this.formBuilder.array([this.formBuilder.formGroup(TenantContractContractedBed)]);

      let contractedBedsGroup = this.formBuilder.formGroup(TenantContractContractedBed);
      contractedBedsGroup.patchValue(element);
      contractedBeds.push(contractedBedsGroup);  
    });

    this.contractedBedsFormGroup.controls["AddContractedBeds"] = contractedBeds; //I was doing this also with an understanding may be it is loosing the reference
Daniel Willis
@danww
I think it's best to stick with referencing the original formArray and modifying it, rather than replacing it. Especially if you have any exisiting subscriptions elsewhere that might be listening to it.
freshdev1
@freshdev1
Agree. I didn't do it in the start, but rather when clear and removeAt was not working, I added it. But now I have removed this line.
Daniel Willis
@danww
Cool cool.
Aishasadat123
@Aishasadat123
what is wrong i this swich case ?
<input type="number" class="form-control" formControlName="{{ child.formControlName }}" />
          <div [ngSwitch]="type">
            <input
              *ngSwitchCase="number"
              class="form-control"
              formControlName="{{ child.type.formControlName }}"
            />
            <ng-select
              *ngSwitchCase="select"
              [items]=""
              class="text-capitalize"
              [searchable]="true"
              formControlName="{{ child.type.formControlName }}"
            >
            </ng-select>
          </div>
Tiantang Sun
@stt106
should I create a component for each CRUD operation or use a single component for all?
DrewMoody
@DrewMoody

I haven't looked into this yet, but does anyone know if you can access context of an element through ViewChildren? Specifically trying to grab context for a mat-row in a mat-table

<tr mat-row *matRowDef="let row; columns: columns"></tr>

I am hoping for access to that row context

Dominic Watson
@intellix
I'm trying to debug performance issues by using Chrome Developer Tools performance recording and analysing the output.... but it's just polluted by Zone. The whole thing is basically: 100% used inside Zone. How am I meant to address performance issues if zone just wraps everything and consumes all knowledge about what's happening?
it makes everything unreadable and unusable I just can't read the output
SAGO
@SAGOlab
Hi there, someone have some news about csp (content security policy)? I need to pass a dynamic nonce to inline style and script, and I cannot use unsafe inline because of internal policy, there is a way to achieve this? Extending webpack or in another way? Thanks
Urban
@UrKr
Wish you could use rxjs operators on component inputs
Amin Bashanfar
@Amin-bash
Hello guys, I have an input that has a card number and I want to put space between every 4 numbers how can I do that
Urban
@UrKr
@mlc-mlapis Interesting, thanks for the links
Pankaj Sharma
@iimphoenix310_twitter
Hi im new to Angular development. Im from India. Can anyone please suggest a better way to use AMP with Angular?
mridul-netizen
@mridul-netizen
Can we use angular universal for SSR purposes if the backend is in Flask?
Also are there some advantages of using EventEmitters over Subject for cross component communication?
RonnBlack
@RonnBlack
I have built some components in angular9 that use the arrow keys to toggle dropdowns and select options. When I have NVDA (ADA Screen Reader) running my components do not receive keydown and keypress events for the arrow keys. Has anyone experienced this and can you tell me how to make this work with NVDA?
Alessandro Tagliapietra
@alex88
HI everyone, is there a way to have sequential async guards? Right know when I have multiple guards returning an Observable<UrlTree> not the first guard that fails decides the redirect
Alessandro Tagliapietra
@alex88
oh nice didn't find that! Thanks @mlc-mlapis
Miloš Lapiš
@mlc-mlapis
@alex88 :thumbsup:
Daniel Willis
@danww
@UrKr @mlc-mlapis I'm not sure I understand the use case here; you can already pass an Observable as an @Input() to a Component. What do these decorators add?
Tiantang Sun
@stt106
I have a pair of input fields which stores a name and a number separately. The problem is I don't know how many pairs are needed; and the number of such pairs needed depends on a user input, e.g. if user enters 7, then I will need to dynamically generate 7 such pairs. Can someone please point how to handle this for a beginner like me? Any reference I can read?
aidosmen
@aidosmen
Hi guys , how do you make Telegram authorization in angular app ? I have found one solution https://stackoverflow.com/questions/56407518/how-can-i-include-the-telegram-login-widget-in-an-angular-app . But the second asnwer code gives me Refused to frame. When I open the same iframe in browser , in browser it works
Miloš Lapiš
@mlc-mlapis
@danww You can do many things, including passing an observable with your logic and behavior, but @ObservableInput() concentrates on transforming a standard input into an observable input, and as a result, simplification and standardization, how and where to detect a change on such input (usually used some code in ngOnChanges or using setters, ...).