angular实现form表单的验证和提交

1，创建表单

<div class="container">
    <h1>表单初次尝试</h1>
    <form *ngIf="active" (ngSubmit)="onSubmit(siteForm.form.value)" #siteForm="ngForm">
        <div>
            <label for="name">名字</label>
            <input type="text" id="name" required [(ngModel)]="model.name" name="name" #name="ngModel">
            <div [hidden]="name.valid || name.pristine">
                请输入名字
            </div>
        </div>
        <button type="submit" [disabled]="!siteForm.form.valid">提交</button>
        <button type="button" (click)="newSite()">新增网站</button>
    </form>
</div>

ts代码如下

@Component({
  selector: 'app-site-form',
  templateUrl: './site-form.component.html',
  styleUrls: ['./site-form.component.scss']
})
export class SiteFormComponent implements OnInit {
  modelvalue = { name: "第一个表单" };
  active = true;
  add() {
    this.active = false;
    setTimeout(() => this.active = true, 0);
  }
  onSubmit(value) {
    console.log("表单的值", value)
  }
  constructor() { }

  ngOnInit() {
  }

}