代码之家 › 专栏 › 技术社区 › Ranjith Varatharajan

使用表单两次返回警告

typescript angular

0

Ranjith Varatharajan · 技术社区 · 7 年前

我有一个简单的表单模板,有电子邮件和密码。我使用此表单模板进行登录和注册。但是当我两次使用同一个表单模板时,我会收到如下警告

[DOM] Found 2 elements with non-unique id #Email

[DOM] Found 2 elements with non-unique id #Password

如何摆脱这个警告。

用户窗体.component.ts

@Component({
  selector: 'app-userform',
  templateUrl: './userform.component.html',
  styleUrls: ['./userform.component.css']
})
export class UserFormComponent {
  @Output() submitted: EventEmitter<UserModel> = new EventEmitter<UserModel>()
  userForm = new FormGroup({
    email : new FormControl(''),
    password : new FormControl('')
  });

  onSubmit() {
    this.submitted.emit(this.userForm.value);
  }
}

<div class="card">
  <div class="card-header">
    Login
  </div>
  <div class="card-body">
    <form [formGroup]="userForm" (ngSubmit)="onSubmit()">
      <div class="form-group">
        <label for="Email">Email address</label>
        <input type="email" class="form-control" id="Email" aria-describedby="emailHelp" placeholder="Enter email" formControlName="email">
      </div>
      <div class="form-group">
        <label for="Password">Password</label>
        <input type="password" class="form-control" id="Password" placeholder="Password" formControlName="password">
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
  </div>
</div>

app.component.html软件

<div class="container">
<div class="row">
    <div class="col-6">
        <app-userform (submitted)="loginUser($event)"></app-userform>
    </div>
    <div class="col-6">
        <app-userform (submitted)="CreateUser($event)"></app-userform>
    </div>
</div>
</div>

应用组件

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  loginUser(user: UserModel) {
    console.log('Login User', user);
  }

  CreateUser(user: UserModel) {
    console.log('Create User', user);
  }
}

如果我运行这个,一切正常,但得到了警告。我知道当同一个模板呈现两次时,会有两个相同的id。有没有什么方法可以自定义这个id,前缀是一个单词?

1 回复 | 直到 7 年前

1

Chellappan à®µ 7 年前

正如注释中提到的@JBNizet,您可以使用一些变量来设置动态id

用户窗体.component.ts

let instance=0;
@Component({
  selector: 'app-userform',
  templateUrl: './userform.component.html',
  styleUrls: ['./userform.component.css']
})
export class UserFormComponent {
  @Output() submitted: EventEmitter<UserModel> = new EventEmitter<UserModel>()
  userForm = new FormGroup({
    email : new FormControl(''),
    password : new FormControl('')
  });
 constructor(){

 this.id=instance++;

 }
  onSubmit() {
    this.submitted.emit(this.userForm.value);
  }
}

用户表单.component.html

<div class="card">
  <div class="card-header">
    Login
  </div>
  <div class="card-body">
    <form [formGroup]="userForm" (ngSubmit)="onSubmit()">
      <div class="form-group">
        <label for="Email">Email address</label>
        <input type="email" class="form-control" id="Email{{id}}" aria-describedby="emailHelp" placeholder="Enter email" formControlName="email">
      </div>
      <div class="form-group">
        <label for="Password">Password</label>
        <input type="password" class="form-control" id="Password{{id}}" placeholder="Password" formControlName="password">
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
  </div>
</div>

例子: https://stackblitz.com/edit/form-instance