我创建了一个处理北美电话号码的角度组件 . 它的工作原理完全正常 . 不幸的是，当我将它封装在父mat-form-field中时，子节点超出了父节点的宽度 . 我希望让父级跟踪子级的宽度，因为并非所有字段都必须可见，具体取决于应用程序的使用情况 . （例如，电话类型选择，收费'1'和复选框和/或'x'扩展名输入字段 . ）
我可以以编程方式在app或css中设置mat-form-field的宽度，但是我无法从组件中获取正确的值来自动化它 .
Test showing mat-form-field with aqua background
打字稿：
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>
<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 回答
我认为这应该是你想要的 . 把它放在你的styles.css中 .
实况示例：https://angular-material-form-field-wrapping-content.stackblitz.io