Questions tagged ngmodel

Explore the latest questions and answers asked by our top developers.

Using Angular 10 with BsDatepickerConfig and ngModel – Store date, not time

I’m using ngx-bootstrap’s BsDatepicker and BsDatepickerConfig to capture a date (Student DOB) and write it to my backend using ngModel. I just want to store YYYY-MM-DD; however, the value is being stored as a date/time stamp, example: 1981-02-04T06:00:00.000Z. How can I just capture YYYY-MM-DD? snippet from create-student.component.ts: bsValue = new Date(); datePickerConfig: Partial<BsDatepickerConfig>; constructor(private studentService: […]

By John Redfern
Categorized as angular, datepicker, ngmodel, typescript Tagged , , ,

Slice Pipe throwing trimmed string instead for original string in onChange of dropdown in angular

I want to trim string from object when length of string greater than 5 so i have used Slice pipe in HTML but while onChange event but it is passing trimmed value which is done by pipe instead of original one. studentList = [{"StudentName":"RockAngelWatson", studentId: "1"}, {"StudentName":"MiyaAngelWatson", studentId: "2"}] ; onChange(event,name) { console.log("&&&&",name) } <select […]

By ResolveError
Categorized as angular, dropdown, ngmodel Tagged , ,

I am working on angular5, want to validate my child component’s form. I am adding inputs in DOM conditionally but @viewChild is not updating the form

<form #form="ngForm" name="formRecurringPayment" id="adyen-encrypted-form" ng novalidate> <div *ngIf="selectedCardItem === ‘newCard’"> <div class="panel panel-default new-card fadeIn"> <div class="panel-body"> <div class="flex-lg flex-md"> <div class="flex__item–grow"> <label class="control-label control-label–uppercase" for="ccnumber">Card number</label> <div class="form-group"> <input class="form-control form-control–no-label" [ngClass]="{ ‘has-error’ : CardNumber.dirty && CardNumber.invalid }" name="ccnumber" id="ccnumber" type="text" autocomplete="cc-number" maxlength="23" data-encrypted-name="number" #CardNumber="ngModel" [(ngModel)]="cardname" (input)="validf($,’ccnumber’)" required appFormatCard appCheckEmpty> <i class="icon control-validation-state"></i> <p […]

By Sahil Abbas
Categorized as angular, angular5, forms, ngmodel, viewchild Tagged , , , ,

How do I display a router parameter in an input box in Angular?

I currently have my routes set as follows in my Angular project: const routes: Routes = [ { path: ‘defect’, component: AppComponent }, { path: ‘defect/:start’, component: DefectComponent } ]; Then in the TS of my DefectComponent I have: //route is declared in my parameters as ActivatedRoute ngOnInit(): void { let temp = this.route.snapshot.paramMap.get(‘start’); if(temp) […]

By JCrew0
Categorized as angular, ngmodel, routes, typescript, url Tagged , , , ,

¿Como puedo mandar un objeto en un Ngmodel? [closed]

Este es mi codigo: <input type="text" placeholder="Buscar.." id="sku_select" aria-label="number" matInput [formControl]="myControl" [matAutocomplete]="auto" [(ngModel)]="selectedValue" (change)="changeClient($event.value)"> <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete"> <mat-option *ngFor="let datos of filteredOptions | async" [value]="datos.campo_1">{{datos.campo_1}}</mat-option> Como se pueden dar cuenta tengo un tipado llamado Formulario donde declaro campo_1, campo_2 y campo_3, lo que quiero es que mi NgModel pueda obtener el campo_2, pero sin tener […]

Textbox not updating immediately after change

I am a absolute beginner with Angular and am currently working on a project that is accessing a service via http. The user can send a file to the service (using HttpClient). Process updates (using SignalR) should be displayed in a textarea. The updates are correctly coming into my component. The console log is displayed […]

By BerkelBits
Categorized as angular, http, ngmodel, observable, signalr Tagged , , , ,

Adding [(ngModel)] prevents page contents loading

All I did was add ngModel to this line like so: <input type="text" value="" class="form-control" placeholder="" [(ngModel)]="sub"> As a result certain parts of my page no longer load (charts, the list that is populated from json that it will hopefully filter against, basically anything that is not hard coded html). UNTIL I click any button […]

By Ree
Categorized as angular, angular12, ngmodel Tagged , ,

How to get ngModel from a custom component?

I have a form with a custom component <app-custom-component [(ngModel)]="myValue"></app-custom-component> In the custom component i have an input which i also use ngModel <input [(ngModel)]="myValue" /> Basically myValue is bound to a custom model and the same myValue is bound to the input inside the custom model. I want the errors of the input’s ngModel […]

By lock42
Categorized as angular, components, ngmodel Tagged , ,

How to 2-way bind a ngModel with a 2D array?

I have an array of events, such that some events may have filters, some may not. To visualize this: [ { type: ‘event1’, filters: [ { name: ‘filter1’ }, { name: ‘filter2’ } ] } { type: ‘event2’, filters: [ { name: ‘filter1’ } ] } { type: ‘event3′, filters: [ ] } ] I’ve […]

By m f
Categorized as angular, angular-ngmodel, ngmodel Tagged , ,

NgModel doesn’t work for ckeditor inside mat-drawer-container

my problem is very strange. I have something like this: <mat-drawer-container class="example-container" autosize> <mat-drawer #drawer class="example-sidenav" mode="side"> <p>Auto-resizing sidenav</p> <p *ngIf="showFiller">Lorem, ipsum dolor sit amet consectetur.</p> <button (click)="showFiller = !showFiller" mat-raised-button> Toggle extra text </button> </mat-drawer> <div class="example-sidenav-content"> <p> <input type="text" [(ngModel)]="content.title" placeholder="Title"> </p> <!– // CkEditor –> <div class="row" style="margin-top: 20px;"> <div class="col-sm-2"></div> <div […]

1 6

Still Have Questions?

Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us