Question

我使用的是反应形式，似乎在随机形式字段方面存在问题。关于为什么发生这种情况的任何想法都令人敬佩。

如果有帮助，我刚刚开始使用角钢和材料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”

应用程序电话代码（请注意，它以前具有formControl而不是appFormControl）

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>

Answer 1

似乎不能有一个名为formControl的Input（）

Answer 2

我看到的一件事是：

  <app-telephone-input i18n-placeholder placeholder="Other Telephone"
                       [formControl]="form.get('otherTelephone')">
  </app-telephone-input>

应该是：

  <app-telephone-input i18n-placeholder placeholder="Other Telephone"
                       [appFormControl]="form.get('otherTelephone')">
  </app-telephone-input>

如果要创建自定义表单控件，则应实现ControlValueAccessor接口

ControlValueAccessor {
  writeValue(obj: any): void
  registerOnChange(fn: any): void
  registerOnTouched(fn: any): void
  ...
}

如果仅实现ControlValueAccessor接口，则可以绑定属性formControl

Answer 3

从父组件中删除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">

示例：https://stackblitz.com/edit/angular-fktkdk

Answer 4

@ricardo 的 answer 不正确

在使用 ControlValueAccessor 接口时，您可以有一个名为 formControl 的 @Input()，很可能您还没有向您的提供者添加 NG_VALUE_ACCESSOR 令牌。类似的东西：

export const VALUE_ACCESSOR: any = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => MyComponent),
    multi: true,
};

@Component({
    selector: 'my-component',
    templateUrl: './my-component.component.html',
    styleUrls: ['./my-component.component.scss'],
    providers: [VALUE_ACCESSOR]
})

Angular 7反应性表单“用于具有未指定名称属性的表单控制的无值访问器”

4 个答案: