angular - 不理解我的角度代码中的一行（我目前正在通过视频课程学习）

Question

正如标题所说，我已经开始使用视频课程学习 Angular，但我似乎并不真正理解某些代码的行为。

对于应用程序组件，我有以下代码：html

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
      <form (ngSubmit)="onSubmit(f)" #f="ngForm">
        <div id="user-data" ngModelGroup="userData" #userData="ngModelGroup">
          <div class="form-group">
            <label for="username">Username</label>
            <input type="text" id="username" class="form-control" ngModel name="username" required> 
          </div>
          <button class="btn btn-default" type="button" (click)="suggestUserName()">Suggest an Username</button>
          <div class="form-group">
            <label for="email">Mail</label>
            <input type="email" id="email" class="form-control" ngModel name="email" email required>
          </div>
        </div>
        <div class="form-group">
          <label for="secret">Secret Questions</label>
          <select id="secret" class="form-control" ngModel name="secret">
            <option value="pet">Your first Pet?</option>
            <option value="teacher">Your first teacher?</option>
          </select>
        </div>
        <button class="btn btn-primary" type="submit">Submit</button>
      </form>
    </div>
  </div>
</div>

ts

import { Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('f') signupForm: NgForm;

  suggestUserName() {
    const suggestedName = 'Superuser';
    this.signupForm.form.patchValue({
      userData: {
        username: suggestedName
      }
    });
  }

  onSubmit(form: NgForm) {
    console.log(form);
  }
}

一切正常。我不太明白的行是这一行：

<div id="user-data" ngModelGroup="userData" #userData="ngModelGroup">

我之前打错了，而不是我写的 userData userdata，如下所示：

<div id="user-data" ngModelGroup="userdata" #userData="ngModelGroup">

而且我没有得到我的应用程序的预期行为（即使我认为我会）

在这段代码中：

this.signupForm.form.patchValue({
      userData: {
        username: suggestedName
      }
    });

userData指的是什么？从这里userData：

ngModelGroup="userData"

或者这个

#userData="ngModelGroup"

谢谢。

标签： angulartypescript