дочерняя форма переполняет ширину поля mat-form-field - PullRequest
Новая
       6

дочерняя форма переполняет ширину поля mat-form-field

0 голосов
/ 29 октября 2018

Я создал угловой компонент, который обрабатывает номера телефонов в Северной Америке. Работает именно так, как должно. К сожалению, когда я заключаю его в родительское поле mat-form-field, дочерний объект выходит за пределы родительского поля. Я хотел бы, чтобы родитель отслеживал ширину дочернего элемента, поскольку не все поля должны быть видны, в зависимости от использования приложения. (например, выберите тип телефона, платный «+1» и флажок и / или поле ввода «x» + добавочный номер.)

Я могу программно установить ширину поля mat-form в приложении или с помощью css, но не могу получить правильное значение из компонента для его автоматизации.

Тест, показывающий поле в форме мата с аква фоном

Машинопись: 

 import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { UsPhoneNumber } from './_classes/us-phone-number';
import { UsPhoneNumberComponent } from './_components/us-phone-number/us-phone-number.component';
import { FormBuilder,
  FormGroup,
  FormControl,
 } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'Phone Test';
  myform : FormGroup;
  zerror = true;
  matPhoneNumber : UsPhoneNumber;

  types: string[] = ['Home','Work','Cell']

  ddd: string = '8005551212';
  eee: string = '40773377721000'
  abc='auto';
  constructor(    
    private formBuilder: FormBuilder // private fm: FocusMonitor,
) {
  this.myform = formBuilder.group(
    {
      myPhone : new FormControl(new UsPhoneNumber('4777337777')),
      matPhone : new FormControl(new UsPhoneNumber('18005551212'))
    })
  }
}

HTML: 

<form [formGroup]='myform'>
    <app-us-phone-number formControlName='myPhone' [phoneTypes]='types' #ppp [value]="ddd" (phoneEvent)="onChange($event)"></app-us-phone-number>
    <br/>
    <mat-form-field appearance='outline' [ngStyle]="{'width':abc}">
        <mat-label>Phone Number</mat-label>
        <mat-hint>Area Code optional</mat-hint>
        <app-us-phone-number formControlName='matPhone' [phoneTypes]='types' #mmm [value]="eee" (phoneEvent)="onMatChange($event)"></app-us-phone-number>
        <mat-error *ngIf="mmm.errorState">{{matPhoneNumber.errmsg}}</mat-error>
    </mat-form-field>
</form>

1 Ответ

0 голосов
/ 29 октября 2018

Я думаю, это должно быть то, что вы хотите. Поместите это в ваши styles.css. 

.mat-form-field-infix {
  width: auto !important;
}

Live Пример: https://angular -material-form-field-wrapping-content.stackblitz.io

...