Question

我正在使用Angular在Nativescript中设计一个简单的<TextField>，我想知道它们是否是在此类字段上使用FormControlName的一种方式。我知道应该将它们放在输入上，但是在没有输入字段的情况下，我们应该对Nativescript做什么？

这是我组件中的元素。

<TextField
        keyboardType="phone"
        autocorrect="false"
        autocapitalizationType="none"
        class="driver-code-input input input-border"
        returnKeyType="done"
        formControlName="code"
        [attr.maxLength]="codeMax"
        ngDefaultControl
      ></TextField>

这是我的一些.ts文件。

export class DriverLoginComponent implements OnInit, OnDestroy {
  public loginForm: FormGroup;
  public codeMax = 4;
  public codeMin = 4;
  public driver: IDriver;
  private destroy$ = new Subject<boolean>();

  constructor(
    private formBuilder: FormBuilder,
    private driversService: DriversService,
    private router: Router,
    private injector: Injector
  ) {}

  public ngOnInit(): void {
    this.loginForm = this.formBuilder.group({
      code: ['', [Validators.required, Validators.minLength(this.codeMin), Validators.maxLength(this.codeMax)]]
    });
  }

运行tns preview时，我在终端中收到此控制台错误。

LOG from device OnePlus 3T: ERROR Error: No value accessor for form control with name: 'code'
LOG from device OnePlus 3T: ERROR CONTEXT {
LOG from device OnePlus 3T: "def": {
LOG from device OnePlus 3T: "nodeFlags": 34327553,
LOG from device OnePlus 3T: "view": {
LOG from device OnePlus 3T: "rootNodeFlags": 1,
LOG from device OnePlus 3T: "nodeMatchedQueries": 0,
LOG from device OnePlus 3T: "flags": 0,
LOG from device OnePlus 3T: "nodes": [
LOG from device OnePlus 3T: {
LOG from device OnePlus 3T: "nodeIndex": 0,
LOG from device OnePlus 3T: "renderParent": null,
LOG from device OnePlus 3T: "parent": null,
LOG from device OnePlus 3T: "bindingIndex": 0,
LOG from device OnePlus 3T: "outputIndex": 0,
LOG from device OnePlus 3T: "checkIndex": 0,
LOG from device OnePlus 3T: "flags": 1,
LOG from device OnePlus 3T: "childFlags": 34327553,
LOG from device OnePlus 3T: "directChildFlags": 16385,
LOG from device OnePlus 3T: "matchedQueries": {},
LOG from device OnePlus 3T: "childMatchedQueries": 0,
LOG from device OnePlus 3T: "references": {},
LOG from device OnePlus 3T: "matchedQueryIds": 0,
LOG from device OnePlus 3T: "ngContentIndex": null,
LOG from device OnePlus 3T: "childCount": 24,
LOG from device OnePlus 3T: "bindings": [],
LOG from device OnePlus 3T: "bindingFlags": 0,
LOG from device OnePlus 3T: "outputs": [],
LOG from device OnePlus 3T: "element": {
LOG from device OnePlus 3T: "name": "GridLayout",
LOG from device OnePlus 3T: "attrs": [
LOG from device OnePlus 3T: "ns": "",
LOG from device OnePlus 3T: [
LOG from device OnePlus 3T: "appHideActionBar",
LOG from device OnePlus 3T: "",
LOG from device OnePlus 3T: ""
LOG from device OnePlus 3T: ]
LOG from device OnePlus 3T: ],
LOG from device OnePlus 3T: "template": null,
LOG from device OnePlus 3T: "componentProvider": null,
LOG from device OnePlus 3T: "componentView":...

我已经确保导入所需的模块。 import { NativeScriptFormsModule } from 'nativescript-angular/forms';

@NgModule({
  declarations: [AppComponent, HomeComponent, DriverLoginComponent, HideActionBarDirective, FormErrorComponent, PathsListComponent],
  imports: [NativeScriptModule, AppRoutingModule, ReactiveFormsModule, NativeScriptFormsModule, HttpClientModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [NO_ERRORS_SCHEMA]
})```

Any idea how I could figure to make it work?

Thank you.

错误：名称为“ code”的表单控件没有值访问器

0 个答案: