Ошибка: нет доступа к значению для управления формой с именем: 'code' - PullRequest
Новая
       21

Ошибка: нет доступа к значению для управления формой с именем: 'code'

0 голосов
/ 17 октября 2019

Я проектировал простой <TextField> в Nativescript с Angular, и я хотел бы знать, является ли их способ использовать 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.
...