What i am trying to do here is display input boxes for each of the people using ngFor. However this only lets me make selection from the first input box and when i make the selection it automatically updates the remaining inputs with the same value. Can anyone help me understand what i could be doing wrong here and i would like to be able to update the values for each person from the people array individually
<table>
<tr>
<td class="detailS">Hours</td>
<td style="width: auto" nowrap class="opt">
<mat-list>
<mat-list-item class="item"
*ngFor="let member of people.value; let i = index">
<div style="margin-left: 50px" nowrap>Start</div>
<div style="margin-left: 30px" *ngIf="edit">
<mat-form-field>
<input matInput [matAutocomplete]="startAuto"
formControlName="start" (click)="onChooseStart()"
required="true">
<mat-autocomplete #startAuto="matAutocomplete"
(optionSelected)="onStartSelected($event)">
<mat-option *ngFor="let time of filteredStart | async"
[value]="time">
{{time | amDateFormat:'h:mm a'}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
<div style="margin-left: 50px" *ngIf="!edit">
{{start?.value}}
</div>
<div style="margin-left: 50px" nowrap>End</div>
<div style="margin-left: 30px" *ngIf="edit">
<mat-form-field>
<input style="width: 70px" #endInput matInput
[matAutocomplete]="endAuto" (click)="onChooseEnd()"
formControlName="end" required="true">
<mat-autocomplete #endAuto="matAutocomplete"
(optionSelected)="onEndSelected($event)">
<mat-option *ngFor="let time of filteredEnd | async"
[value]="time">
{{time | amDateFormat:'h:mm a'}}{{getDifference(formGroup.get('start').value, time)}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
<div style="margin-left: 50px" *ngIf="!edit">
{{end?.value}}
</div>
</mat-list-item>
</mat-list>
</tr>
</table>
Related
I have a form this form takes up 1/3 of the screen adjacent to the left , so ı want to this form display with full width (occupy the entire screen from left to right.). I searched on google and tried some methods which are width : 100% , fxFlexFill, (fxLayout="column" fxLayoutAlign=" stretch"), fxFlexs .Maybe i used them wrong . I couldn't do it in any way.
calander page:
<form [formGroup]="userForm" (ngSubmit)="sendRequest()">
<div fxLayout="row" style="background-color: white">
<div fxLayout="column" fxFlex="10">
<mat-form-field appearance="fill">
<mat-label>Date</mat-label>
<input
matInput
#pick
[matDatepicker]="picker"
(dateInput)="OnDateChange(pick)"
[min]="todayDate"
[max]="maxDate"
readonly
/>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker touchUi #picker [startAt]="todayDate"></mat-datepicker>
</mat-form-field>
</div>
<div fxLayout="column" fxFlex="15"></div>
<div fxLayout="column" fxFlex="30">
<mat-form-field appearance="fill">
<mat-label>Name</mat-label>
<input matInput formControlName="firstName" />
</mat-form-field>
</div>
<div fxLayout="column" fxFlex="15"></div>
<div fxLayout="column" fxFlex="30">
<mat-form-field appearance="fill">
<mat-label>Phone Number</mat-label>
<input matInput formControlName="phone" />
</mat-form-field>
</div>
<div></div>
</div>
<div fxLayout="row">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- hour Column -->
<ng-container matColumnDef="hour">
<th mat-header-cell *matHeaderCellDef>hour(90 min)</th>
<td mat-cell *matCellDef="let element">{{ element.hour }}</td>
</ng-container>
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef>No.</th>
<td mat-cell *matCellDef="let element">{{ element.position }}</td>
</ng-container>
<!-- Checkbox Column -->
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let row">
<mat-checkbox
(click)="$event.stopPropagation()"
*ngIf="row.statu == 'Open'"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)"
>
</mat-checkbox>
</td>
</ng-container>
<!-- statu Column -->
<ng-container matColumnDef="statu">
<th mat-header-cell *matHeaderCellDef>statu</th>
<td mat-cell *matCellDef="let element">{{ element.statu }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr
mat-row
*matRowDef="let row; columns: displayedColumns"
(click)="selection.toggle(row)"
></tr>
</table>
</div>
<div>
<button mat-raised-button class="my-class" type="submit" color="accent">
Send
</button>
</div>
</form>
calander page css:
table {
width: 100%;
}
.example-form .mat-form-field + .mat-form-field {
margin-left: 8px;
}
.my-class{
margin-top: 10px;
width: 100%!important;
}
.mat-form-field-empty.mat-form-field-label {
color: green;
}
.mat-form-field-underline {
background-color: green;
}
What exactly should take up the whole screen? If you want the three input fields to stretch to the far right, you can change
<div fxLayout="row" style="background-color: white">
to
<div fxLayout="row" id="row" style="background-color: white; display: flex">
I think that could help you https://tburleson-layouts-demos.firebaseapp.com/#/docs
They said : "Using 'fxFill' to fill available width and height of parent container"
So ... you must have the size of the parent at 100%.
I'm new in ionic angular, so I have a table where I use a select as:
<ion-row>
<ion-col size="3">
<mat-form-field appearance="fill">
<mat-label>Per page</mat-label>
<select matNativeControl [(ngModel)]="perPage" (ngModelChange)="setPerPage($event)" name="perPage">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
</mat-form-field>
</ion-col>
</ion-row>
So it shows something like:
As you can see it has an arrow down. I want this same arrow on input, my current input:
<ion-col size="4" class="ion-text-left">
<p class="filter__title">Company</p>
<mat-form-field class="mat-form-control form_control-adjust">
<input #clientInput (keyup)="(0)" [matAutocomplete]="auto" [formControl]="company" matInput [(ngModel)]="selectedCompany"/>
<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" [displayWith]="displayFn" (optionSelected)='loadContacts($event.option.value)'>
<mat-option (onSelectionChange)="(clientInput.value != undefined)" *ngFor="let client of clientsFiltered | async" [value]="client">
<table class="autocomplete-table">
<tr>
<td class="text-crol" style="width: 20px">
{{ client.name }}
</td>
</tr>
</table>
</mat-option>
</mat-autocomplete>
</mat-form-field>
</ion-col>
Is it possible to change the input for select in order to show arrow-down?
As Chiranjaya Denuwan comment bellow I changed it to:
<ion-col size="4" class="ion-text-left">
<p class="filter__title">Company</p>
<mat-form-field class="mat-form-control form_control-adjust">
<mat-select class="custom-dropdown">
<mat-option (onSelectionChange)="(clientInput.value != undefined)" *ngFor="let client of clientsFiltered | async" [value]="client">
<table class="autocomplete-table">
<tr>
<td class="text-crol" style="width: 20px">
{{ client.name }}
</td>
</tr>
</table>
</mat-option>
</mat-select>
</mat-form-field>
It is showing as I want, problem is not changing table on selection change, I think is because I missing <mat-autocomplete> that I have on my original input, but when I try to add, it just does not load any option in select
Here you can use Angular material select.
input a class attribute into the mat-select
<mat-form-field appearance="fill">
<mat-label>Favorite food</mat-label>
<mat-select class="custom-dropdown">
<mat-option *ngFor="let food of foods" [value]="food.value">
{{food.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
then CSS ,
.custom-dropdown ::ng-deep.mat-select-arrow-wrapper {
visibility: hidden;
}
I can't write in input inside the expansion-panel, the focus is removed once I click on the input.
here is it my code!
<ng-container *ngFor="let i of listSousCategorie">
<mat-expansion-panel class="childPanel" [expanded]="true" hideToggle disabled style=" background:#ecfaff;">
<div class="childPanel_body2 mat-badge-large" fxLayout="row" fxFlex fxLayoutAlign="start center" >
<div style="padding-left:1em" fxFlex="grow" >{{i.libelle}}</div>
<mat-form-field style="width:50px" appearance="standard" [formGroup]="form">
<mat-label>Note</mat-label>
<input type="text" matInput formControlName="Note" " >
</mat-form-field>
</div>
</mat-expansion-panel>
</ng-container>
Ive used a mat-card,inside that ive used mat-card-title and a form with 4 to 5 controls,mat-card layout is not visible on deployment in the browser,but mat-card title is displaying,Ive posted the form content and controls inside the mat-card-content only
Here is the template code,
<mat-card id="card" style="text-align: center;">
<mat-card-title>Details</mat-card-title>
<mat-card-content>
<form [formGroup] = "activityPlannerService.form" class="normal-form" (submit) = "onSubmit()">
<mat-grid-list cols="2" rowHeight="400px">
<mat-grid-tile>
<div class="controlers-container">
<input type="hidden" formControlName="$key">
<mat-form-field>
<mat-select formControlName="releaseName" placeholder="Release Name *">
<mat-option>None</mat-option>
<ng-container *ngFor="let release of releaseArray">
<mat-option value = "{{release.label}}">{{release.value}}</mat-option>
</ng-container>
</mat-select>
<mat-error>This field is mandatory</mat-error>
</mat-form-field>
<mat-form-field>
<mat-select formControlName="sprintName" placeholder="Sprint Name *" multiple>
<mat-option>None</mat-option>
<ng-container *ngFor="let sprint of sprintArray">
<mat-option value = "{{sprint.label}}">{{sprint.value}}</mat-option>
</ng-container>
</mat-select>
<mat-error>This field is mandatory</mat-error>
</mat-form-field>
<mat-form-field>
<mat-select formControlName="userName" placeholder="User Name *" multiple>
<mat-option>None</mat-option>
<ng-container *ngFor="let user of userArray">
<mat-option value = "{{user.label}}">{{user.value}}</mat-option>
</ng-container>
</mat-select>
<mat-error>This field is mandatory</mat-error>
</mat-form-field>
<mat-form-field>
<mat-select formControlName="activity" placeholder="Activities *" multiple>
<mat-option>None</mat-option>
<ng-container *ngFor="let activity of activitiesArray">
<mat-option value = "{{activity.label}}">{{activity.value}}</mat-option>
</ng-container>
</mat-select>
<mat-error>This field is mandatory</mat-error>
</mat-form-field>
<mat-form-field>
<input formControlName="plannedEffort" matInput placeholder="Planned Efforts">
<mat-error>This field is mandatory</mat-error>
</mat-form-field>
<div class="button-row">
<button mat-raised-button color="primary" type="submit" [disabled]="activityPlannerService.form.invalid">Submit</button>
<button mat-raised-button color="warn" (click) = "onClear()">Clear</button>
</div>
</div>
</mat-grid-tile>
</mat-grid-list>
</form>
</mat-card-content>
</mat-card>
Here is the image of the browser output window,
I know i just made a minor mistake,im a new learner,please correct me,Thanks in advance:-)
Please try using the following line of code .
<mat-card>
<mat-card-header>
<mat-card-title>Details</mat-card-title>
</mat-card-header>
<form [formGroup]="activityPlannerService.form" class="normal-form" (submit)="onSubmit()">
<mat-card-content>
<mat-grid-list cols="2" rowHeight="400px">
<mat-grid-tile>
<div class="controlers-container">
<input type="hidden" formControlName="$key">
<mat-form-field>
<mat-select formControlName="releaseName" placeholder="Release Name *">
<mat-option>None</mat-option>
<ng-container *ngFor="let release of releaseArray">
<mat-option value="{{release.label}}">{{release.value}}</mat-option>
</ng-container>
</mat-select>
<mat-error>This field is mandatory</mat-error>
</mat-form-field>
<mat-form-field>
<mat-select formControlName="sprintName" placeholder="Sprint Name *" multiple>
<mat-option>None</mat-option>
<ng-container *ngFor="let sprint of sprintArray">
<mat-option value="{{sprint.label}}">{{sprint.value}}</mat-option>
</ng-container>
</mat-select>
<mat-error>This field is mandatory</mat-error>
</mat-form-field>
<mat-form-field>
<mat-select formControlName="userName" placeholder="User Name *" multiple>
<mat-option>None</mat-option>
<ng-container *ngFor="let user of userArray">
<mat-option value="{{user.label}}">{{user.value}}</mat-option>
</ng-container>
</mat-select>
<mat-error>This field is mandatory</mat-error>
</mat-form-field>
<mat-form-field>
<mat-select formControlName="activity" placeholder="Activities *" multiple>
<mat-option>None</mat-option>
<ng-container *ngFor="let activity of activitiesArray">
<mat-option value="{{activity.label}}">{{activity.value}}</mat-option>
</ng-container>
</mat-select>
<mat-error>This field is mandatory</mat-error>
</mat-form-field>
<mat-form-field>
<input formControlName="plannedEffort" matInput placeholder="Planned Efforts">
<mat-error>This field is mandatory</mat-error>
</mat-form-field>
</div>
</mat-grid-tile>
</mat-grid-list>
</mat-card-content>
<mat-card-actions>
<div class="button-row">
<button mat-raised-button color="primary" type="submit" [disabled]="activityPlannerService.form.invalid">Submit</button>
<button mat-raised-button color="warn" (click)="onClear()">Clear</button>
</div>
</mat-card-actions>
</form>
</mat-card>
Hello all I have the following piece of code:
<table class="details-table" *ngIf="peop && peopMetadata">
<tr *ngFor="let attribute of peopMetadata.Attributes">
<td class="details-property">{{attribute.AttributeLabel}}</td>
<td [ngSwitch]="attribute.AttributeType">
<div *ngSwitchCase="'String'">
<input matInput [(ngModel)] = "peop[attribute.AttributeKey]" />
</div>
<div *ngSwitchDefault>{{peop[attribute.AttributeKey]}
</div>
</td>
</tr>
<div>
<button ng-click="">Submit</button>
</div>
</table>
I want to disable the input based on an attribute values say peop[attribute.IsWritable]='false' . How can i achieve this here . Any help is appreciated
INPUT only approach:
<input [disabled]="!peop[attribute.IsWritable]" matInput [(ngModel)] = "peop[attribute.AttributeKey]" />
CONDITIONAL approach:
<ng-container *ngIf="peop[attribute.IsWritable]">
<input matInput [(ngModel)]="peop[attribute.AttributeKey]" />
</ng-container>
<ng-container *ngIf="!peop[attribute.IsWritable]">
<span>{{ peop[attribute.AttributeKey] }}</span>
</ng-container>
OR:
<input *ngIf="peop[attribute.IsWritable]" matInput [(ngModel)]="peop[attribute.AttributeKey]" />
<span *ngIf="!peop[attribute.IsWritable]">{{ peop[attribute.AttributeKey] }}</span>
I just came across the need to do this and found that I needed to use ng-disabled to do it.
<input id="my-input-id" class="my-input-class" type="number" name="my-input-name" ng-model="MyCtrl.myModel" required ng-disabled="MyCtrl.myProperty && MyCtrl.myProperty !== 'someValue'"></input>
Hope this helps someone else!