Accessing AngularDart NgForm values on Form Submit

Source: www.stackoverflow.com

I am having difficulties implementing NgForm to handle form data. I currently have my a working solution simply implementing two-way binding like so:

post_create_component.dart

import 'dart:async';
import 'package:angular/angular.dart';
import 'package:angular_forms/angular_forms.dart';
import 'package:angular_components/material_button/material_button.dart';
import 'package:angular_components/material_icon/material_icon.dart';
import 'package:angular_components/material_input/material_input.dart';

import '../../models/post.dart';

@Component(
    selector: 'app-post-create',
    styleUrls: [
      'package:angular_components/css/mdc_web/card/mdc-card.scss.css',
      'post_create_component.css'
    ],
    templateUrl: 'post_create_component.html',
    directives: [
      formDirectives,
      MaterialButtonComponent,
      MaterialIconComponent,
      materialInputDirectives,
    ])
class PostCreateComponent {
  String enteredTitle = '';
  String enteredContent = '';

  final _postCreated = new StreamController();

  void onAddPost() {
    Post post = Post(this.enteredTitle, this.enteredContent);
    _postCreated.add(post);
  }

  @Output()
  Stream get postCreated => _postCreated.stream;
}

post_create_component.html

Post Comments

Save Post

I have refactored my code to look like this:

post_create_component.dart

import 'dart:async';
import 'dart:html';

import 'package:angular/angular.dart';
import 'package:angular_forms/angular_forms.dart';
import 'package:angular_components/material_button/material_button.dart';
import 'package:angular_components/material_icon/material_icon.dart';
import 'package:angular_components/material_input/material_input.dart';

import '../../models/post.dart';

@Component(
    selector: 'app-post-create',
    styleUrls: [
      'package:angular_components/css/mdc_web/card/mdc-card.scss.css',
      'post_create_component.css'
    ],
    templateUrl: 'post_create_component.html',
    directives: [
      formDirectives,
      MaterialButtonComponent,
      MaterialIconComponent,
      materialInputDirectives,
      NgForm,
    ])
class PostCreateComponent {
  String enteredTitle = '';
  String enteredContent = '';

  final _postCreated = new StreamController();

  void onAddPost(NgForm form) {
    window.console.log(form.value);
    Post post = Post(form.value.title, form.value.content);
    _postCreated.add(post);
  }

  @Output()
  Stream get postCreated => _postCreated.stream;
}

post_create_component.html

Post Comments

Save Post

When I submit my form, I get the following error:
Console log error in chrome dev tools.
Clearly I am not accessing the Identity Map correctly. How do I go about accessing the values? Any help is appreciated.

Read More Here, go to stackoverflow Author of this News
Author: lutetium

Leave a Reply

Your email address will not be published. Required fields are marked *