Как мне создать компонент, содержащий поле mat-form и поле ввода? - PullRequest
Новая
       19

Как мне создать компонент, содержащий поле mat-form и поле ввода?

0 голосов
/ 01 февраля 2019

Я работаю над проектом, который использует много вложенных реактивных форм, и я хочу создать элемент управления, который оборачивает и поле Mat-Form-Field, и входные данные в один компонент, но когда я пробую это в своей форме, япродолжаю получать ошибки.

Я думаю, что проблема в том, что элемент управления находится в массиве, так как кажется, что он работает сам по себе.

В настоящее время с кодом ниже я получаю следующую ошибкуmessage BasicInputComponent.html: 2 ОШИБКА: Ошибка: не удается найти элемент управления с именем: 'firstName'

Я также пытался использовать ControlValueAccessor, но я не уверен, что это правильный путь, и когдаЯ попробовал это, я не мог заставить mat-from-field признать, что он не действителен.

Я понимаю, что пример довольно прост, но мне действительно нужен элемент управления, чтобы его можно было использовать в массивах формтак что я могу использовать его в других местах системы.

Дочерний компонент html: 

<mat-form-field floatLabel="never" class="ng-untouched ng-pristine ng-invalid">
    <input matInput #input [placeholder]="placeholder" [type]="type" [attr.maxlength]="maxlength" type="text" [formControlName]="controlName"/>
    <mat-hint *ngIf="maxlength" align="end">{{input.value?.length || 0}}/{{maxlength}}</mat-hint>
</mat-form-field>

Дочерний компонент ts 

@Component({
    selector: 'app-basic-input',
    templateUrl: './basic-input.component.html',
    styleUrls: ['./basic-input.component.css'],
    viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }]
})
export class BasicInputComponent { 

    @Input() placeholder: string;
    @Input() controlName: string;
    @Input() maxlength: number | null;

    constructor() {}
}

Родительский html: 

<form [formGroup]="vehicle">
    <div formArrayName="occupants" *ngFor="let occupant of vehicle.get('occupants')['controls']; let i = index;">
        <div [formGroupName]="i">
              <app-basic-input placeholder="First Name" controlName="firstName" maxlength="25"></app-basic-input>
        </div>
    </div>
</form>

родительский тс: 

    vehicle= this.fb.group({
        occupants: this.fb.array([
            this.fb.group({
                firstName: ['', Validators.required],
                lastName: ['', Validators.required]
            })
        ])
    })

1 Ответ

0 голосов
/ 01 февраля 2019

Попробуйте разбить эту строку в parent.html : 

...
<div formArrayName="occupants" *ngFor="let occupant of vehicle.get('occupants')['controls']; let i = index;">
...
</div>
...

на 

...
<div formArrayName="occupants">
  <div *ngFor="let occupant of vehicle.get('occupants')['controls']; let i = index;">
  ...
  </div>
</div>
...
...