私はリアクティブフォームを使用していますが、ランダムフォームフィールドのように見えるものに問題があるようです。なぜこれが起こっているのかについての考えは、すべて得られます。
angularとマテリアル7を使い始めたばかりです。
興味深いことに、フォーム内の要素を追加および削除すると、他の要素で問題が発生します。
エラーエラー:名前属性が指定されていないフォームコントロールの値アクセサーがありません
TS
export class VolunteerApplicationPersonalStepComponent implements OnInit
{
public readonly form: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
businessTelephoneExt: [''],
otherTelephone: [''],
otherTelephoneExt: [''],
});
}
}
HTML
<form [formGroup]="form">
<mat-form-field>
<input matInput i18n-placeholder placeholder="Business Extension"
[formControl]="form.get('businessTelephoneExt')">
</mat-form-field>
<app-telephone-input i18n-placeholder placeholder="Other Telephone"
[formControl]="form.get('otherTelephone')">
</app-telephone-input>
<mat-form-field>
<input matInput i18n-placeholder placeholder="Other Extension"
[formControl]="form.get('otherTelephoneExt')">
</mat-form-field>
<br>
<div class="group-margin group-min-width">
<button mat-stroked-button color="primary" matStepperPrevious i18n>Previous</button>
<button mat-raised-button color="primary" matStepperNext (click)="next()" i18n>Next</button>
</div>
</form>
誰かが提案したように..formControlName = "businessTelephoneExt"
アプリ-電話コード(以前はappFormControlではなくformControlを使用していたことに注意してください)
export class TelephoneInputComponent implements OnInit {
@Input() public required = false;
@Input() public placeholder = '';
@Input() public appFormControl: NgControl;
constructor() {
}
public ngOnInit() {
}
}
<mat-form-field>
<input
matInput
type="tel"
[required]="required"
[placeholder]="placeholder"
[formControl]="appFormControl">
<mat-hint i18n>Please enter digits only</mat-hint>
<mat-error
*ngIf="appFormControl.hasError('phone')"
i18n>Invalid phone (requires 10 digits)
</mat-error>
</mat-form-field>
親コンポーネントからotherTelephoneフォームコントロールを削除し、子コンポーネントからotherTelephoneを追加します
export class VolunteerApplicationPersonalStepComponent implements OnInit
{
public readonly form: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
businessTelephoneExt: [''],
otherTelephoneExt: [''],
});
}
}
ControlContainerを使用して親フォームインスタンスを子コンポーネントに提供し、FormGroupDiretiveを挿入して親フォームインスタンスを取得します
apptelephoneinput.component.html
@Component({
selector: 'app-telephone-input',
templateUrl: './app-telephone-input.component.html',
styleUrls: ['./app-telephone-input.component.css'],
viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective
}]
})
export class TelephoneInputComponent implements OnInit {
@Input() public required = false;
@Input() public placeholder = '';
childForm;
constructor(private parentF: FormGroupDirective) { }
ngOnInit() {
this.childForm = this.parentF.form;
this.childForm.addControl('otherTelephone', new FormControl(''))
}
}
app-telephone-input.component.html
<mat-form-field>
<input
matInput
type="tel"
[required]="required"
[placeholder]="placeholder"
formControl="otherTelephone">