问标识符“fName”未定义。组件声明、模板变量声明和元素引用不包含此类成员。
EN

Stack Overflow用户

提问于 2020-06-24 11:51:05

回答 1查看 490关注 0票数 0

How to solve this problem. I am using angular 8.
Error in Line number 85.
"addProduct(fName.value, lName.value, email.value,Password.value)"

我想添加fName，lName，电子邮件，密码在MongoDB图集上。这个问题是“标识符'fName‘没有定义。组件声明、模板变量声明和元素引用不包含这样的成员，标识符'lName’没有定义。组件声明、模板变量声明和元素引用不包含这样的成员，标识符‘fName’没有定义。组件声明、模板变量声明和元素引用不包含这样的成员，标识符‘密码’没有定义。组件声明、模板变量声明和元素引用不包含这样的成员。"生成。

<body>
  <div class="container p-3">
       <div class="offset-3 col-6">
         <div class="card">
          <div class="card-header  p-3 ">
          <h3> Add User Form</h3>
          </div>
          <div class="card card-body">
            <form [formGroup]="frmSignup" (submit)="addProduct()">

              <div class="row ">
                          <div class="form-group col-md-6">
                              <label class="FontBold">First Name </label>
                              <!--Use class binding for validation-->
                              <input [class.is-invalid]="frmSignup.get('fName').invalid" type="text" class="form-control font-weight-bold"
                                  formControlName="fName">
                              <label [class.d-none]="frmSignup.get('fName').valid" class="text-danger">First is
                                  required</label>
                          </div>

                          <div class="form-group col-md-6">
                              <label class="FontBold">Last Name </label>
                              <!--Use class binding for validation-->
                              <input [class.is-invalid]="frmSignup.get('lName').invalid" type="text" class="form-control font-weight-bold"
                                  formControlName="lName">
                              <label [class.d-none]="frmSignup.get('lName').valid" class="text-danger">Last is required</label>
                          </div>

              </div>



              <div class="form-group">
                      <label for="email" [ngClass]="frmSignup.controls['email']" class="FontBold">email Address</label>

                      <input id="email" formControlName="email" type="email" class="form-control font-weight-bold"
                      [ngClass]="frmSignup.controls['email'].invalid ? 'is-invalid' : ''">

                      <label class="text-danger" *ngIf="frmSignup.controls['email'].hasError('required')">
                          email is Required!
                      </label>

                      <label class="text-danger" *ngIf="frmSignup.controls['email'].hasError('email')">
                          Enter a valid email address!
                      </label>

              </div>


              <div class="form-group">
                <label for="password" [ngClass]="frmSignup.controls['password']" class="FontBold">Password:</label>

                <input id="password" formControlName="password" type="password" class="form-control font-weight-bold"
                [ngClass]="frmSignup.controls['password'].invalid ? 'is-invalid' : ''">

                <label class="text-danger " *ngIf="frmSignup.controls['password'].hasError('required')">
                Password is Required!
                </label>
                <label class="FontBold">
                  (Note:- Password contain at least 8 characters,It Contain 1 number,1 Capital Case,1 Small Case,1 Special Character. )
                </label>

               
              </div>


              <div class="form-group">
                      <label for="confirmPassword" [ngClass]="frmSignup.controls['confirmPassword']" class="FontBold">Confirm Password:</label>

                      <input id="confirmPassword" formControlName="confirmPassword" type="password" class="form-control font-weight-bold"
                          [ngClass]="frmSignup.controls['confirmPassword'].invalid ? 'is-invalid' : ''">

                      <label class="text-danger" *ngIf="frmSignup.controls['confirmPassword'].hasError('required')">
                          Password is Required!
                      </label>

                      <label class="text-danger" *ngIf="frmSignup.controls['confirmPassword'].hasError('NoPassswordMatch')">
                          Password do not match
                      </label>

              </div>

              <div class="form-group">
                <button [disabled]="frmSignup.invalid"
                (onClick)="addProduct(fName.value, lName.value, email.value,Password.value)"
                 type="submit" class="btn btn-primary btn-block font-weight-bold">Register</button>

              </div>
              <div class="form-group">
                  <button  type="submit" class="btn btn-danger btn-block font-weight-bold" routerLinkActive="list-item-active" routerLink="/">Cancle</button>
                </div>

            </form>
          </div>
        </div>
       </div>
    </div>

    </body>










 And This is the .ts file.






import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { CustomValidators } from 'src/app/modules/custom-validators';


@Component({
  selector: 'app-add-user',
  templateUrl: './add-user.component.html',
  styleUrls: ['./add-user.component.css']
})
export class AddUserComponent {
  public frmSignup: FormGroup;

  constructor(private fb: FormBuilder) {
    this.frmSignup = this.createSignupForm();
  }


  createSignupForm(): FormGroup {
    return this.fb.group(
      {
        fName :['', [Validators.required, Validators.minLength(5)] ],
        lName :['', [Validators.required, Validators.minLength(5)] ],

        email: [
          null,
          Validators.compose([Validators.email, Validators.required])
        ],
        password: [
          null,
          Validators.compose([
            Validators.required,
            // check whether the entered password has a number
            CustomValidators.patternValidator(/\d/, {
              hasNumber: true
            }),
            // check whether the entered password has upper case letter
            CustomValidators.patternValidator(/[A-Z]/, {
              hasCapitalCase: true
            }),
            // check whether the entered password has a lower case letter
            CustomValidators.patternValidator(/[a-z]/, {
              hasSmallCase: true
            }),
            // check whether the entered password has a special character
            CustomValidators.patternValidator(
              /[ !@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/,
              {
                hasSpecialCharacters: true
              }
            ),
            Validators.minLength(8)
          ])
        ],
        confirmPassword: [null, Validators.compose([Validators.required])]
      },
      {
        // check whether our password and confirm password match
        validator: CustomValidators.passwordMatchValidator
      }
    );
  }

  

  addProduct(fName, lName, email, Password) {
    const obj = {
      fName,
      lName,
      email,
      Password
    };
    console.log(obj);

  }



}

angular8

node.js

回答 1

Stack Overflow用户

发布于 2020-06-25 02:29:07

试着使用getter和setter怎么样？

就你而言，

 get fName() { return this.frmSignup.get('fName'); }

这样就可以访问模板中的表单数据。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62554397

复制

相似问题

问标识符“fName”未定义。组件声明、模板变量声明和元素引用不包含此类成员。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问标识符“fName”未定义。组件声明、模板变量声明和元素引用不包含此类成员。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问标识符“fName”未定义。组件声明、模板变量声明和元素引用不包含此类成员。
EN