Angular Material Input and Select in One Form Field

Angular Material Input and select in one form field

You could wrap your form field in a div and assign it a class so that you can nest the CSS. The reason to nest the CSS is to avoid it affecting the rest of the controls. I did something like this:

<div class="time-picker-component">
    <mat-form-field appearance="outline">
        <mat-label>End Time</mat-label>
        <input matInput type="time" placeholder="HH:MM" id="end_time_hour" [formControl]="timeFormControl">
     <mat-select name="ampm" class="ampm" [(ngModel)]="event.eampm">
          <mat-option value="AM">AM</mat-option>
          <mat-option value="PM">PM</mat-option>
     </mat-select>
   </mat-form-field>
</div>

and then add the folloing CSS somewhere globally:

.time-picker-component .mat-form-field-infix {
  display: inherit;
}

Demo

angular material select and input inside the same field

Follow the angular-material docs which looks at creating a custom form field control: Creating a custom form field control

How to create two inputs as one form field and apply style specifically in Angular Material?

Set class to the mat-form-field

Stackblitz example stackblitz

 <mat-form-field appearance="outline" class="bg__yellow">
    <mat-select>
      <mat-option value="gm">Grams</mat-option>
      <mat-option value="kg">Kilos</mat-option>
      <mat-option value="mg">Milligrams</mat-option>
    </mat-select>
  </mat-form-field>

then in css file

::ng-deep mat-form-field.bg__yellow .mat-form-field-outline {
  background-color: yellow;
}

Accessing inputs with Angular Material Select and Reactive Forms

Hopefully, this can help..

Change your mat-option [value] to

[value]="availableGenre"

Then add a function in your .ts

click(array) {
  console.log('genres:', array)
}

And then a button in the .html

<button (click)="click(genres.value)">Click me</button>

And like joyBlanks says, the values are also available in this.toppings.value

click2() {
  console.log('genres:', this.genres.value)
}

<button (click)="click2()">Click me</button>

Angular: Two FormControl inside one mat-form-field

As mentioned by @archelite, I could fix this with (click)="$event.stopPropagation()" on apm-lock.

<mat-form-field class='block' appearance="outline">
      <mat-label i18n>Anlagenverantwortlicher</mat-label>

      <apm-lock matSuffix formControlName="locked" matTooltip="Für Import sperren" (click)="$event.stopPropagation()"></apm-lock>

      <mat-select multiple formControlName="value">
        <mat-option>
          <ngx-mat-select-search apmSelectSearchFilter [formControl]="plantResponsibleFilterCtrl"
            [data]="filteredplantResponsibles" [fields]="['firstname', 'lastname', 'email']">
          </ngx-mat-select-search>
        </mat-option>
        <mat-option *ngFor="let user of filteredplantResponsibles | async" [value]="user._id">
          {{user.firstname}} {{user.lastname}} ({{user.email}})</mat-option>
      </mat-select>
    </mat-form-field>

how to show the mat select option input, based on a another input value's character

I would seperate the logic from the HTML.

In the HTML you would have your input and the select:

<input type="text" [(ngModel)]="inputValue" (ngModelChange)="checkGOI()" />

<select>
    <option value="PS">Public Sector</option>
    <option value="PVS">Private Sector</option>
</select>

In the .ts file you now need a variable "inputValue" and function which checks, if the digits 13,14 an 15 are equal to GOI and sets the result to a boolean:

  public inputValue: string = '';
  public containsGOI: boolean = false;

  public checkGOI(): void {
    this.containsGOI = this.inputValue.substring(12, 15) === 'GOI';
  }

Now you can modifiy the select and the option like this:

<select [disabled]="containsGOI">
  <option value="PS" [selected]="containsGOI">Public Sector</option>
  <option value="PVS">Private Sector</option>
</select>

If the inputValue contains GOI, the select is disabled and PS is selected.

Also keep in mind, that substr is deprecated (Why is String.prototype.substr() deprecated?)

---

Related Topics