'fName' 속성은 인덱스 서명에서 가져온 것이므로 ['fName']을(를) 사용하여 액세스해야 합니다.

'fName' 속성은 인덱스 서명에서 가져온 것이므로 ['fName']을(를) 사용하여 액세스해야 합니다.

이것들은 제 파일입니다.이 오류가 발생합니다. 누가 도와줄 수 있나요.

Error: src/app/app.component.html:5:123 - error TS4111: Property 'fName' comes from an index signature, so it must be accessed with ['fName'].
        <input id="name" type="text" formControlName="fName" class="form-control" [ngClass]="{'is-invalid':submitted && f.fName.errors}"/>

성분.

    <form [formGroup]="surveyForm" (ngSubmit)="onSubmit()">
      <div>
        <label>Name:</label>
        <input id="name" type="text" formControlName="fName" class="form-control" [ngClass]="{'is-invalid':submitted && f.fName.errors}"/>
        <div *ngIf="submitted && f.fName.errors" class="form-control">first name is required</div>
      </div>
    </form>

component.ts

    import { Component, OnInit } from '@angular/core';
    import { FormControl, FormBuilder, FormGroup, Validators} from '@angular/forms';
    @Component({
    selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
      })
      export class AppComponent implements OnInit{
        surveyForm!: FormGroup;
        submitted= false;

     constructor(private  formBuilder: FormBuilder){}

     ngOnInit(){
     this.surveyForm = this.formBuilder.group({
       fName: ['',Validators.required]
      });
    }  
    //name = new FormControl('');
    get f() { return this.surveyForm.controls; }

     onSubmit() {
     this.submitted = true;

    // stop here if form is invalid
    if (this.surveyForm.invalid) {
        return;
    }

    // display form values on success
    alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.surveyForm.value, null, 4));
    }

     onReset() {
    this.submitted = false;
    this.surveyForm.reset();
    }}

모듈.ts

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { ReactiveFormsModule } from '@angular/forms';
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { FormsModule } from '@angular/forms';
    //import { FormBuilder } from '@angular/forms';

    @NgModule({
     declarations: [
       AppComponent
     ],
    imports: [
     BrowserModule,
     AppRoutingModule,
     FormsModule,
     ReactiveFormsModule,
     //FormBuilder
     ],
    //declarations: [AppComponent],
      providers: [
     //FormBuilder
     ],
     bootstrap: [AppComponent]
     })
     export class AppModule { }

이것은 TypeScript에서 전혀 불필요한 기능이라고 생각합니다.사용하지 않으려면 파일을 변경해야 합니다.tsconfig.json:

"compilerOptions": {
// ...
  "noPropertyAccessFromIndexSignature": false,
// ...
}

무엇이 문제인지 명확히 하겠습니다.우리는 템플릿 기반 양식 검증에 대해 이야기하고 있습니다.필드가 필요한지 확인하려면 검증해야 합니다(firstName이라고 함).Angular v13부터는 다음과 같이 이전 코드에서 약간 변경되었습니다.

<div *ngIf="firstName.errors?.required">First Name is required</div>

여기까지

<div *ngIf="firstName.errors?.['required']">First Name is required</div>

'?'는 오류 개체가 null이 아님을 확인하기 위한 것입니다.

자세한 내용은 다음과 같습니다. https://angular.io/guide/form-validation

이 키 값을 tsconfig.json 파일의 false로 변경합니다.

"noPropertyAccessFromIndexSignature": false

반응형 폼을 사용한 각도 13 폼 유효성 검사

*.component.ts 파일의 폼 필드에 쉽게 액세스할 수 있도록 폼 () getter를 추가합니다.

//convenience getter for easy access to form fields
get form(): { [key: string]: AbstractControl; }
{
    return this.signInForm.controls;
}

전자 메일 필드 오류에 대한 액세스 예제

form['email'].errors

form['email'].errors['required']

form['email'].errors['email']

signInForm HTML 예제

<form [formGroup]="signInForm" (ngSubmit)="onSubmit()">

    <div class="form-group">
        <label for="email">Email</label>
        <input type="email" formControlName="email" class="form-control"
            [ngClass]="{ 'is-invalid': submitted && form['email'].errors }" />
        <div *ngIf="submitted && form['email'].errors" class="invalid-feedback">
            <div *ngIf="form['email'].errors['required']">
                Field is required
            </div>
            <div *ngIf="form['email'].errors['email']">
                Email format is invalid
            </div>
        </div>
    </div>

    <div class="form-group mt-3">
        <label for="password">Password</label>
        <input type="password" formControlName="password" class="form-control"
            [ngClass]="{ 'is-invalid': submitted && form['password'].errors }" />
        <div *ngIf="submitted && form['password'].errors" class="invalid-feedback">
            <div *ngIf="form['password'].errors['required']">
                Password is required
            </div>
        </div>
    </div>

    <div class="mt-3 d-flex justify-content-between">
        <button type="submit" [disabled]="isLoading" mat-flat-button color="primary">
            <span *ngIf="isLoading" class="spinner-border spinner-border-sm mr-1"></span>
            Sign in
        </button>
    </div>

</form>

각도 14.0.4에서, 그것은 단지 나에게 효과가 있었습니다.

<div *ngIf="user?.errors?.['required'] ">First Name is required</div>

답변:

<span *ngIf="username?.errors?.['required']">Name is required</span>
<span *ngIf="username?.errors?.['minlength']">
    Name must be 3 
charchters</span>

다음은 Error: 질문에 대한 답변입니다.src/app/reactive-signup/reactive-signup.component.html:16:52 - error TS4111: Property 'required' comes from an index signature, so it must be accessed with ['required'].

<span *ngIf="username?.errors.required">
    Name is required
</span>

사용해주세요f['fName'].errors대신에f.fName.errors.

<input id="name" type="text" formControlName="fName" class="form-control" [ngClass]="{'is-invalid':submitted && f['fName'].errors}"/>

반응형 양식과 양식 작성기를 사용한 Angular 13 Form Validation, Angular 문서에서 해결책을 찾았는데 Angular 12와 다른 점이 있습니다. 다음을 시도해 보십시오.

<div *ngIf="submitted && surveyForm.get('fName')?.valid" class="form-control">first name is required</div>

내 경우엔 효과가 있었습니다

<div *ngIf="firstName.errors?.required">
        <b>First Name is required</b>
      </div>

이 예제를 확인합니다.

파일.ts

formBuilderInit() {
        this.form = this.formBuilder.group({
            first_name: [null, Validators.required],
            middle_name: [],
            last_name: [null, Validators.required],
            email: [],
            tel: [null, [Validators.required, Validators.pattern('^[0-9]{12}$')]],
        });
    }

    // convenience getter for easy access to form fields
    get f(): { [key: string]: AbstractControl; } {
        return this.form.controls;
    }

줄을 대다

<mat-label for="tel">Telephone</mat-label>
    <mat-form-field>
       <input
          type="number"
          matInput
          formControlName="tel"
          class="form-control"
          placeholder="Ex: 250722353933"
          [ngClass]="{ 'is-invalid': submitted && f['tel'].errors }"
       />
       </mat-form-field>
       <div *ngIf="submitted && f['tel'].errors" class="invalid-feedback">
        <div *ngIf="f['tel'].errors['required']">Telephone Number is required</div>
            <div *ngIf="f['tel'].errors['pattern']">
               Phone number must be at least 12 digit numbers
            </div>
       </div>

오류 사이에 점(.)을 삽입하는 것을 잊지 마십시오.및 ['required'] 아래와 같이

<div *ngIf="firstName.errors?.['required']">First Name is required</div>

자세한 정보(angular 15)는 다음 링크로 이동합니다: https://angular.io/guide/form-validation

ngmodel의 오류 특성을 가진 angular form validation 새로운 버전의 angular include following tag에 속성 검증이 필요함 *<div ngIf="phone.hasError('required')">전화번호가 필요함 이 패턴('각형')이 오류를 해결하는 데 도움이 되었습니다.

형님은 off 대신 f['fullName'].errors[required]만 사용하세요.fName.errors.필수

Q: 'fullname' 속성은 인덱스 서명에서 가져온 것이므로 ['fullname'으로 액세스해야 합니다.

언급URL : https://stackoverflow.com/questions/70106472/property-fname-comes-from-an-index-signature-so-it-must-be-accessed-with-fn